/* generator.css: the QR code generator form and preview.
   Used by /generate/ and /wifi-qr-code-generator/. Owner: Task 3. */
.gen-tool{ display:grid; gap:32px; align-items:start; }
@media (min-width:992px){ .gen-tool{ grid-template-columns:minmax(0,1fr) 400px; gap:56px; } .gen-preview{ position:sticky; top:calc(var(--nav-h) + 24px); } }
.gen-form{ background:var(--white); border-radius:24px; padding:24px; border:1px solid var(--line-light); display:grid; gap:18px; }
.gen-title{ font-size:22px; }
.field{ display:grid; gap:6px; }
.field label,.gen-fields legend{ font-weight:600; font-size:15px; color:var(--deep); }
.field input[type="text"],.field input[type="tel"],.field input[type="email"],.field input[type="url"],.field select,.field textarea{
  width:100%; min-height:46px; padding:10px 12px; border:1px solid #C9CDE6; border-radius:12px; background:var(--white);
  font:400 16px/1.4 var(--text); color:var(--deep); }
.field textarea{ resize:vertical; }
.field textarea[readonly]{ background:var(--mist); color:var(--slate); font-family:ui-monospace, Menlo, monospace; font-size:14px; }
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{ outline:3px solid var(--blue); outline-offset:1px; }
.field input[type="color"]{ width:100%; height:46px; padding:4px; border:1px solid #C9CDE6; border-radius:12px; background:var(--white); }
.field-row{ display:grid; gap:18px; }
@media (min-width:640px){ .field-row{ grid-template-columns:1fr 1fr; } }
.field-check{ display:flex; align-items:center; gap:10px; align-self:end; min-height:46px; }
.field-check input{ width:20px; height:20px; accent-color:var(--indigo); }
.field-hint{ font-size:14px; color:var(--slate); }
.gen-fields{ border:0; margin:0; padding:0; display:grid; gap:18px; min-width:0; }
.gen-fields[hidden]{ display:none; }
.gen-preview{ background:var(--white); border-radius:24px; padding:24px; border:1px solid var(--line-light); display:grid; gap:16px; justify-items:center; }
.qr-container{ width:100%; min-height:348px; display:flex; align-items:center; justify-content:center; padding:24px; border-radius:16px; background:var(--qr-light, #fff); border:1px solid var(--line-light); }
.qr-container img,.qr-container canvas{ max-width:100%; height:auto; }
/* The library sets display:none on the canvas when it shows its <img> copy. generator.js removes that copy. */
.qr-container canvas{ display:block !important; }
.qr-msg{ color:var(--slate); text-align:center; max-width:28ch; }
.qr-msg.is-error{ color:#B0005A; font-weight:600; }
.gen-preview .btn{ width:100%; }
.gen-note{ font-size:14px; color:var(--slate); text-align:center; }
/* The tool follows the hero with no dither, so it needs less top space. */
.section.gen-section{ padding-top:48px; }
.gen-fields legend{ padding:0; margin-bottom:12px; }