/* ============================================================================
   ToolBench — qr.css
   QR Code Generator: template tabs with icons, two-column content/preview
   layout, per-template field grid, color pickers, and the preview panel.

   Tokens and the shared card/.tabs/.field/.opts/.panel/.seg/.chips/.actions
   classes come from site.css and tools.css — never redeclared here.
   ============================================================================ */

/* --------------------------------------------------------- template tabs -- */
.qr-tabicon{display:inline-flex;margin-right:6px;vertical-align:-3px;color:currentColor;opacity:.85}
.qr-tabicon svg{display:block;stroke:currentColor}
.qr-tabs button[aria-selected="true"] .qr-tabicon{opacity:1}

/* ------------------------------------------------------------- 2-col layout -- */
.qr-layout{display:grid;gap:28px;grid-template-columns:1fr}
@media (min-width:900px){
  .qr-layout{grid-template-columns:1.35fr 1fr;align-items:start}
  .qr-col-preview{position:sticky;top:84px}
}

.stephead{display:flex;align-items:center;gap:10px;margin:26px 0 14px}
.stephead:first-child{margin-top:0}
.stepno{
  flex:none;display:grid;place-items:center;width:24px;height:24px;
  background:var(--ink);color:#fff;border-radius:50%;
  font:600 12px/1 var(--mono);
}
.stephead h2{margin:0;font:600 16px/1.2 var(--display);color:var(--ink)}

/* --------------------------------------------------------- template fields -- */
.fieldgrid{display:grid;gap:10px 14px;grid-template-columns:1fr;margin:0 0 6px}
@media (min-width:576px){.fieldgrid{grid-template-columns:1fr 1fr}}

.qr-ta-sm{min-height:5em}
@media (min-width:768px){.qr-ta-sm{min-height:6em}}

.lbl .hint{text-transform:none;letter-spacing:normal;font-weight:400;color:var(--slate-light)}

/* single-line inputs — same shape as the hashing tools' .inp/.keywrap */
.inp{
  display:block;width:100%;padding:11px 12px;
  background:var(--paper);border:1px solid var(--paper-line);border-radius:var(--radius);
  color:var(--ink);
  font:400 16px/1.5 var(--mono);   /* >=16px: stops iOS Safari zooming on focus */
}
.inp:focus{outline:0;border-color:var(--blueprint);box-shadow:0 0 0 3px rgba(44,110,142,.14)}
.inp:disabled{opacity:.5;cursor:not-allowed}
.inp-sm{padding:8px 10px;font-size:14px}
.hfield{margin:0 0 14px}
.keywrap{position:relative}
.keywrap .inp{padding-right:78px}
.keywrap > .btn{position:absolute;right:6px;bottom:6px}

.qr-utm-toggle{margin:2px 0 14px}

.qr-finalurl{
  margin:0 0 18px;padding:10px 12px;
  background:var(--paper);border:1px solid var(--paper-line);border-radius:var(--radius);
}
.qr-finalurl .lbl{display:block;margin:0 0 4px}
.qr-finalurl-val{
  display:block;word-break:break-all;overflow-wrap:anywhere;
  font:400 13px/1.5 var(--mono);color:var(--ink);
}

/* ------------------------------------------------------------- style panel -- */
.qr-colorfield{display:inline-flex;align-items:center;gap:6px;margin-right:18px}
.qr-colorfield input[type=color]{
  flex:none;width:34px;height:34px;padding:0;border:1px solid var(--paper-line);
  border-radius:var(--radius);background:none;cursor:pointer;
}
.qr-colorfield .inp-sm{width:92px}

/* --------------------------------------------------------------- preview --- */
.qr-previewbox{
  display:grid;place-items:center;aspect-ratio:1;width:100%;max-width:340px;margin:0 auto 14px;
  background:#fff;border:1px solid var(--paper-line);border-radius:var(--radius);
  padding:16px;
}
.qr-previewimg{display:block;max-width:100%;max-height:100%}
.qr-previewempty{
  padding:0 20px;text-align:center;font:400 13px/1.5 var(--mono);color:var(--slate-light);
}
.qr-meta{margin:0 0 14px;text-align:center;font:400 12px/1.4 var(--mono);color:var(--slate-light)}

.qr-col-preview .actions{justify-content:center}
.qr-col-preview .btn.is-disabled{opacity:.45;cursor:not-allowed;pointer-events:none}