/* qr.css (W2, qr_maker / wifi_qr / vcard_qr): the form stage (mode, ten content types, the type's fields, live preview
   with the capacity meter, the exact content), batch list + label paper, the side options (level, colours, output,
   card) and the result box. Builds on tool.css + local.css (the same grammar as barcode.css). */
.qr { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.qr__one, .qr__many { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

.qr [hidden], .qr__opt[hidden], [data-qr-only][hidden], .qr__reset[hidden], .qr__cwarn[hidden] { display: none !important; }
/* ten types = 5 × 2 (desktop), 2 × 5 on a phone; every row ruled like the first (as .seg--pos) */
.qr__types .seg__row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.qr__types .seg__o:nth-child(n+6) { border-top: 1px solid var(--ink); }
.qr__types .seg__o:nth-child(5n+1) { border-inline-start: 0; }
.qr__types .seg__n { font-size: 15px; }
.qr__wsec .seg__n, .qr__bout .seg__n { font-size: 14px; }
/* output: 2 × 2 in the side column */
.qr__out .seg__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.qr__out .seg__o:nth-child(n+3) { border-top: 1px solid var(--ink); }
.qr__out .seg__o:nth-child(3) { border-inline-start: 0; }
.qr__ecl .seg__row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.qr__ecl .seg__n { font-family: var(--f-code); font-size: 17px; }

/* the type's fields */
.qr__fields { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.qr__g { display: grid; gap: 14px; min-width: 0; }
.qr__g[hidden], .qr__fields [hidden] { display: none; }
.qr__g--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.qr__g--2 > .qr__more, .qr__g--2 > .qr__wide, .qr__g--2 > .lfield:has(textarea) { grid-column: 1 / -1; }
.qr__big .lfield__i, .lfield__i.qr__big { font-size: 19px; min-height: 56px; }
.qr__mono .lfield__i { font-family: var(--f-code); letter-spacing: .04em; }
.qr__area { resize: vertical; min-height: 88px; line-height: 1.45; }
.qr__more { grid-column: 1 / -1; border-top: 1px solid var(--rule); padding-top: 10px; }
.qr__more > summary { cursor: pointer; font: 500 12.5px/1.4 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); min-height: 44px; display: flex; align-items: center; gap: 8px; list-style: none; }
.qr__more > summary::-webkit-details-marker { display: none; }
.qr__more > summary::before { content: "+"; width: 18px; text-align: center; font-weight: 600; color: var(--ink); transition: transform .3s var(--e-out); }
.qr__more[open] > summary::before { transform: rotate(45deg); }
.qr__more > .qr__g { margin-top: 8px; }
.qr__cc { max-width: 190px; }
.qr__ccw { display: flex; align-items: center; gap: 6px; }
.qr__ccw b { font: 600 17px/1 var(--f-code); }
.qr__honest { margin: 0; }
html[lang="ar"] .qr__more > summary, html[lang="ja"] .qr__more > summary { text-transform: none; letter-spacing: 0; }

/* field message under the fields */
.qr__hint { min-height: 1.45em; font-size: var(--t-meta); color: var(--ink-2); display: flex; align-items: center; gap: 8px; margin: -6px 0 0; }
.qr__hint:empty { visibility: hidden; }
.qr__hint::before { content: ""; width: 7px; height: 7px; flex: none; background: var(--ink-3); }
.qr__hint.is-ok::before { background: var(--ok); }
.qr__hint.is-bad { color: var(--signal-ink); font-weight: 560; }
.qr__hint.is-bad::before { background: var(--signal); }

/* live preview: the code on a cutting mat, the capacity meter under it */
.qr__prev { margin: 0; display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); align-items: center; gap: 22px; padding: 22px; border: 1px solid var(--rule); background: var(--paper-2);
  background-image: linear-gradient(var(--rule-2) 1px, transparent 1px), linear-gradient(90deg, var(--rule-2) 1px, transparent 1px); background-size: 16px 16px; }
.qr__card { position: relative; width: 100%; aspect-ratio: 1; background: #fff; box-shadow: 6px 6px 0 var(--ink); transition: opacity .35s var(--e-out), box-shadow .35s var(--e-out); overflow: hidden; direction: ltr; }
[dir="rtl"] .qr__card { box-shadow: -6px 6px 0 var(--ink); }
.qr__card svg { display: block; width: 100%; height: 100%; }
.qr__card.is-ghost { box-shadow: none; outline: 1px dashed var(--ink-3); }
.qr__card.is-ghost svg { opacity: .14; }
.qr__scan { position: absolute; inset-inline: 6%; top: 50%; height: 2px; background: var(--ok); box-shadow: 0 0 10px 1px rgba(11, 122, 78, .5); opacity: 0; pointer-events: none; }
.motion .qr__card.is-ok .qr__scan { animation: qrScan 1.4s var(--e-io) 1 alternate; }
.motion .qr__card.is-ok:hover .qr__scan { animation: qrScan 1.4s var(--e-io) infinite alternate; }
@keyframes qrScan { 0% { opacity: 0; transform: translateY(-80px); } 20% { opacity: .9; } 100% { opacity: .9; transform: translateY(80px); } }
.qr__meter { display: grid; gap: 8px; min-width: 0; font-size: var(--t-meta); color: var(--ink-2); }
.qr__mrow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.qr__mrow .side__k { margin: 0; }
.qr__meter [data-qr-meter] { color: var(--ink); font-weight: 600; font-size: 14px; }
.qr__bar { position: relative; display: block; height: 8px; border: 1px solid var(--ink); background: var(--paper); overflow: hidden; }
.qr__bar i { position: absolute; inset: 0; background: var(--ok); transform: scaleX(0); transform-origin: left center; transition: transform .45s var(--e-out); }
[dir="rtl"] .qr__bar i { transform-origin: right center; }
.qr__bar.is-hi i { background: var(--signal); }
.qr__mnote:empty { display: none; }

/* the exact content the phone reads */
.qr__content { border-top: 1px solid var(--rule); padding-top: 4px; }
.qr__content > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 8px; font: 500 12.5px/1.4 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); list-style: none; }
.qr__content > summary::-webkit-details-marker { display: none; }
.qr__content > summary::before { content: ""; width: 8px; height: 8px; border-inline-end: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: rotate(-45deg); transition: transform .3s var(--e-out); }
[dir="rtl"] .qr__content > summary::before { transform: rotate(45deg); }
.qr__content[open] > summary::before { transform: rotate(45deg); }
html[lang="ar"] .qr__content > summary, html[lang="ja"] .qr__content > summary { text-transform: none; letter-spacing: 0; }
.qr__pre { margin: 6px 0 8px; padding: 10px 12px; max-height: 180px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: 13px/1.5 var(--f-code); background: var(--paper-2); border-inline-start: 3px solid var(--ok); text-align: left; }
.qr__pre:empty { display: none; }

/* batch */
.qr__list { font-family: var(--f-code); font-size: 15px; line-height: 1.5; min-height: 168px; resize: vertical; }
.qr__lrow { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; }
.qr__lrow .link-arrow { font-size: 15px; min-height: 44px; }
.qr__lrow .ico { width: 14px; height: 14px; }
.qr__count, .qr__sheetinfo { font-size: var(--t-meta); color: var(--ink-2); min-height: 1.4em; }
.qr__count.is-bad, .qr__sheetinfo.is-bad { color: var(--signal-ink); font-weight: 600; }
.qr__sheets .seg__o:nth-child(n+4) { border-top: 1px solid var(--ink); }
.qr__sheets .seg__o:nth-child(4) { border-inline-start: 0; }
.qr__sheets .seg__o { min-height: 58px; }
.qr__custom { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.qr__custom .lfield__i { min-height: 44px; font-size: 16px; }
.qr__sheetinfo { margin-top: 10px; }

/* side options */
.qr__colors { border: 0; padding: 0; margin: 0; min-width: 0; }
.qr__crow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.qr__sw { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; font-size: 15px; }
.qr__sw input { width: 44px; height: 44px; padding: 0; border: 1px solid var(--ink); border-radius: var(--r-1); background: var(--paper); cursor: pointer; }
.qr__sw input::-webkit-color-swatch-wrapper { padding: 4px; }
.qr__sw input::-webkit-color-swatch { border: 0; border-radius: 2px; }
.qr__sw input::-moz-color-swatch { border: 0; border-radius: 2px; }
.qr__sw b { font-weight: 500; color: var(--ink-2); }
.qr__sw:hover input { box-shadow: 3px 3px 0 var(--ink); }
[dir="rtl"] .qr__sw:hover input { box-shadow: -3px 3px 0 var(--ink); }
.qr__reset { font-size: 14px; min-height: 44px; }
.qr__cwarn { margin: 10px 0 0; padding: 8px 10px; border-inline-start: 3px solid var(--signal); background: var(--paper-2); font-size: var(--t-meta); line-height: 1.45; color: var(--signal-ink); }
.qr__out .seg__n { font-size: 14px; }
.qr__opt { display: grid; gap: 12px; }
.qr__opt[hidden], [data-qr-only][hidden] { display: none; }
.qr__opt .lfield__i { min-height: 44px; font-size: 16px; }
.qr__static { border-inline-start-color: var(--ok); margin: 4px 0 0; }
/* touch targets ≥ 44 px on this page: check boxes, and the kit's "again" link under the downloads */
.inst--local .lcheck { min-height: 44px; align-items: center; }
.inst--local .side--done [data-local-again] { min-height: 44px; display: inline-flex; align-items: center; }

/* result */
.qr__res { margin: 0 0 14px; padding: 12px; background: #fff; box-shadow: 5px 5px 0 var(--ink); max-width: 260px; }
[dir="rtl"] .qr__res { box-shadow: -5px 5px 0 var(--ink); }
.qr__res img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.qr__bad { margin-top: 14px; padding: 10px 12px; border-inline-start: 3px solid var(--signal); background: var(--paper-2); }
.qr__bad ul { margin-top: 6px; font-size: var(--t-meta); line-height: 1.45; color: var(--ink-2); }
.qr__bad li + li { margin-top: 3px; }
/* "what next": three rows under the downloads (moved there by qr-page.js) */
.qr__next { margin: 18px 0 8px; }
.qr__next .side__k { margin: 0 0 6px; }
.qr__next .next__a { margin-top: 0; border-top: 0; font-size: 15px; }
.qr__next .next__a:first-of-type { border-top: 1px solid var(--rule); }

@media (max-width: 719.98px) {
  .qr { gap: 16px; }
  .qr__types .seg__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qr__types .seg__o:nth-child(n+3) { border-top: 1px solid var(--ink); }
  .qr__types .seg__o:nth-child(5n+1) { border-inline-start: 1px solid var(--ink); }
  .qr__types .seg__o:nth-child(2n+1) { border-inline-start: 0; }
  .qr__g--2 { grid-template-columns: minmax(0, 1fr); }
  .qr__prev { grid-template-columns: minmax(0, 1fr); padding: 14px; gap: 14px; }
  .qr__card { width: min(100%, 240px); justify-self: center; box-shadow: 4px 4px 0 var(--ink); }
  [dir="rtl"] .qr__card { box-shadow: -4px 4px 0 var(--ink); }
  .qr__custom { grid-template-columns: 1fr 1fr; }
  .qr__sheets .seg__n { font-size: 14px; }
}