/* qrread.css (W3, qr_reader / wifi_qr_read / pdf_qr_read): the side note (links are never opened by themselves, paste),
   and the result: the picture with a numbered outline per code, one card per code (kind, format, page; the address with
   its registrable domain in bold, calm warnings, rows with copy buttons, a hidden Wi-Fi password), "what next".
   Builds on tool.css + local.css (the same grammar as qr.css / barcode.css). Outline ↔ card highlight each other. */
.qrr__side { display: grid; gap: 10px; }
.qrr__side .maint { margin: 0; }
.qrr__safe { border-inline-start-color: var(--ok); }
.qrr__paste { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 10px; }
.qrr__keys { display: inline-flex; gap: 3px; }
.qrr__paste kbd { font: 600 12px/1 var(--f-mono); padding: 4px 6px; border: 1px solid var(--ink); border-bottom-width: 2px; border-radius: 3px; background: var(--paper); color: var(--ink); }

/* the result box spans the whole stage under the big number */
.res--local .lbox { grid-column: 1 / -1; grid-row: auto; align-self: start; margin-top: 22px; }
.qrr__res { display: grid; gap: 16px; min-width: 0; }
.qrr__sum { margin: 0; color: var(--ink-2); }
.qrr__all { display: flex; justify-content: flex-end; margin-bottom: -6px; }

/* the picture on a cutting mat, outlines over it in the picture's own coordinates */
.qrr__figs { display: flex; flex-wrap: wrap; gap: 14px; }
.qrr__fig { margin: 0; flex: 1 1 260px; max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px; 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; }
.qrr__pic { position: relative; display: inline-block; line-height: 0; max-width: 100%; background: #fff; box-shadow: 5px 5px 0 var(--ink); direction: ltr; }
[dir="rtl"] .qrr__pic { box-shadow: -5px 5px 0 var(--ink); }
.qrr__cv { display: block; max-width: 100%; max-height: 440px; width: auto; height: auto; }
.qrr__pic svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.qrr__mk polygon { fill: rgba(229, 58, 36, .10); stroke: var(--signal); stroke-width: 2.5px; stroke-linejoin: round; transition: fill .2s var(--e-out), stroke-width .2s var(--e-out); }
.qrr__mk circle { fill: var(--ink); stroke: #fff; stroke-width: 2px; vector-effect: non-scaling-stroke; }
.qrr__mk text { fill: #fff; font-family: var(--f-mono); font-weight: 700; }
.qrr__mk.is-hl polygon { fill: rgba(229, 58, 36, .26); stroke-width: 4.5px; }
.qrr__mk.is-hl circle { fill: var(--signal); }
.qrr__cap { color: var(--ink-2); line-height: 1.3; }
/* Arabic / Japanese in the mono captions: no letter-spacing (it breaks joined Arabic letters apart) */
html[lang="ar"] .qrr__cap, html[lang="ar"] .qrr__sum, html[lang="ar"] .qrr__f, html[lang="ja"] .qrr__cap, html[lang="ja"] .qrr__sum { letter-spacing: 0; font-family: var(--f-sans); }

/* one card per code */
.qrr__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.qrr__it { border: 1px solid var(--ink); border-radius: var(--r-1); background: var(--paper); padding: 14px 16px 16px; min-width: 0; transition: box-shadow .25s var(--e-out), transform .25s var(--e-out); }
.qrr__it:hover, .qrr__it.is-hl, .qrr__it:focus-within { box-shadow: 4px 4px 0 var(--ink); }
[dir="rtl"] .qrr__it:hover, [dir="rtl"] .qrr__it.is-hl, [dir="rtl"] .qrr__it:focus-within { box-shadow: -4px 4px 0 var(--ink); }
.qrr__h { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 10px; }
.qrr__n { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px; background: var(--ink); color: var(--paper); font-weight: 700; font-size: 14px; border-radius: 2px; }
.qrr__it.is-hl .qrr__n { background: var(--signal); }
.qrr__k { font-weight: 680; font-size: 17px; letter-spacing: -.01em; }
.qrr__f { margin-inline-start: auto; color: var(--ink-2); }
.qrr__b { display: grid; gap: 10px; min-width: 0; }
.qrr__b > * { margin: 0; }
.qrr__lead { font-size: var(--t-meta); color: var(--ink-2); }
.qrr__url { font-family: var(--f-code); font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; word-break: break-all; text-align: left; }
.qrr__q { color: var(--ink-3); }
.qrr__dom { color: var(--ink); font-weight: 750; font-size: 1.12em; background: linear-gradient(transparent 62%, rgba(255, 174, 0, .45) 62%); }
.qrr__warn { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.qrr__warn li, .qrr__ok { 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); }
.qrr__warn li.is-hi { font-weight: 640; }
.qrr__ok { border-inline-start-color: var(--ok); color: var(--ink-2); }
.qrr__dl { display: grid; grid-template-columns: minmax(96px, max-content) minmax(0, 1fr); gap: 8px 16px; margin: 0; align-items: center; }
.qrr__dl dt { font-size: var(--t-meta); color: var(--ink-2); }
.qrr__dl dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.qrr__v { overflow-wrap: anywhere; font-weight: 560; }
.qrr__v--m { font-family: var(--f-code); letter-spacing: .03em; }
.qrr__code { font-family: var(--f-code); font-size: 26px; font-weight: 600; letter-spacing: .08em; }
.qrr__note { font-size: var(--t-meta); line-height: 1.45; color: var(--ink-2); }
.qrr__txt { margin: 0; padding: 10px 12px; max-height: 300px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: 14px/1.5 var(--f-code); background: var(--paper-2); border: 1px solid var(--rule); }
.qrr__raw > summary { cursor: pointer; font: 500 12.5px/1.4 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); min-height: 40px; display: flex; align-items: center; gap: 8px; list-style: none; }
.qrr__raw > summary::-webkit-details-marker { display: none; }
.qrr__raw > summary::before { content: "+"; width: 16px; text-align: center; font-weight: 600; color: var(--ink); transition: transform .3s var(--e-out); }
.qrr__raw[open] > summary::before { transform: rotate(45deg); }
html[lang="ar"] .qrr__raw > summary, html[lang="ja"] .qrr__raw > summary { text-transform: none; letter-spacing: 0; }
.qrr__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.qrr__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--ink); border-radius: var(--r-1); background: var(--paper); color: var(--ink); font: 600 14px/1.1 var(--f-sans); text-decoration: none; cursor: pointer; transition: box-shadow .2s var(--e-out), background .2s var(--e-out); }
.qrr__btn:hover { box-shadow: 3px 3px 0 var(--ink); }
[dir="rtl"] .qrr__btn:hover { box-shadow: -3px 3px 0 var(--ink); }
.qrr__btn:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.qrr__btn--go { background: var(--ink); color: var(--paper); }
.qrr__btn--s { min-height: 34px; padding: 0 10px; font-size: 13px; }
.qrr__btn.is-ok { border-color: var(--ok); color: var(--ok); }
.qrr__btn--go.is-ok { color: var(--paper); background: var(--ok); }
.qrr__bd { margin: 2px 0 0; }
/* "what next": under the (empty) downloads, as on the QR maker */
.qrr__next { margin: 4px 0 8px; }
.qrr__next .side__k { margin: 0 0 6px; }
.qrr__next .next__a { margin-top: 0; border-top: 0; font-size: 15px; }
.qrr__next .next__a:first-of-type { border-top: 1px solid var(--rule); }
.inst--local .side--done [data-local-again] { min-height: 44px; display: inline-flex; align-items: center; }
.qrr__all[hidden], .qrr__figs:empty { display: none; }

@media (pointer: coarse) {
  .qrr__paste { display: none; }                  /* a phone has no Ctrl+V; the drop zone / picker is the way there */
  .qrr__btn--s { min-height: 44px; padding: 0 14px; }
}
@media (max-width: 719.98px) {
  .res--local .lbox { margin-top: 14px; }
  .qrr__it { padding: 12px; }
  .qrr__dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .qrr__dl dd { margin-bottom: 8px; }
  .qrr__fig { padding: 10px; }
  .qrr__cv { max-height: 320px; }
  .qrr__url { font-size: 15px; }
}