/* qr. scanner page — leans on theme.css vars, gen.css (.acts/.qempty/.out-*), hero.css (.panels/.step) */

/* source tabs */
.stabs{display:flex;gap:6px;margin-bottom:var(--space-2)}
.stab{font:inherit;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:var(--track-wide);
  padding:0.45rem 0.9rem;background:transparent;border:1px solid var(--border);border-radius:999px;
  color:var(--text-dim);cursor:pointer}@media (hover:hover){ .stab:hover {color:var(--text)} }
.stab.on{border-color:var(--ok-dim);color:var(--ok);background:rgba(61,220,132,0.06)}
.spane{display:none}
.spane.on{display:block}

/* image drop zone */
.drop{border:1px dashed var(--border);border-radius:var(--radius);padding:var(--space-4) var(--space-3);
  text-align:center;cursor:pointer;transition:border-color .15s,background .15s}.drop:focus-visible, .drop.over {border-color:var(--ok-dim);background:rgba(61,220,132,0.04);outline:none}
@media (hover:hover){ .drop:hover {border-color:var(--ok-dim);background:rgba(61,220,132,0.04);outline:none} }
.drop-t{font-size:var(--fs-sm);color:var(--text)}
.drop-s{font-size:var(--fs-xs);color:var(--text-faint);margin-top:0.3rem}

/* camera */
.camwrap{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:#000;
  aspect-ratio:4/3;display:grid;place-items:center;margin-bottom:var(--space-2)}
#video{width:100%;height:100%;object-fit:cover;display:block}
#video[hidden]{display:none}
.cam-idle{font-size:var(--fs-xs);color:var(--text-faint);padding:var(--space-3);max-width:38ch;text-align:center;line-height:1.6}

.src-err{margin-top:var(--space-1);font-size:var(--fs-xs);color:#e05f5f}
.scan-hint{font-size:var(--fs-sm);color:var(--text-dim);line-height:1.6;max-width:52ch}

/* result */
.res-chip{display:inline-block;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:var(--track-wide);
  color:var(--ok);border:1px solid var(--ok-dim);border-radius:999px;padding:0.25rem 0.7rem;margin-bottom:var(--space-2)}
.res-fields{display:grid;grid-template-columns:auto 1fr;gap:0.4rem 0.8rem;font-size:var(--fs-sm);margin-bottom:var(--space-2)}
.res-k{color:var(--text-faint);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:var(--track-wide);padding-top:0.15rem}
.res-v{color:var(--text);word-break:break-word;min-width:0}
.res-v .host{color:var(--ok);font-weight:500}
.res-copy{font:inherit;font-size:var(--fs-xs);background:none;border:1px solid var(--border);border-radius:6px;
  color:var(--text-faint);cursor:pointer;padding:0.05rem 0.5rem;margin-left:0.5rem;vertical-align:middle}@media (hover:hover){ .res-copy:hover {color:var(--ok);border-color:var(--ok-dim)} }
.res-copy.did{color:var(--ok);border-color:var(--ok-dim)}
.res-note{font-size:var(--fs-xs);color:var(--text-faint);margin-top:var(--space-1)}

.res-raw{margin-top:var(--space-2);font-size:var(--fs-xs)}
.res-raw summary{cursor:pointer;color:var(--text-faint);list-style:none}
.res-raw summary::before{content:'+ ';color:var(--ok)}
.res-raw[open] summary::before{content:'\2212 '}
.res-raw summary::-webkit-details-marker{display:none}
.res-raw pre{margin-top:0.5rem;padding:var(--space-2);background:rgba(255,255,255,0.03);
  border:1px solid var(--border);border-radius:var(--radius);white-space:pre-wrap;word-break:break-all;
  max-height:220px;overflow:auto;font-size:var(--fs-xs)}