/* ============================================================================
   preview.css — the live preview step in the questionnaire.

   Framed as a browser window on purpose: the chrome tells the visitor "this is
   your site, rendered", not "this is another section of the form".
   ========================================================================== */

.pv{display:grid;grid-template-columns:250px minmax(0,1fr);gap:clamp(18px,2.4vw,32px);align-items:start}
@media (max-width:900px){ .pv{grid-template-columns:1fr} }

/* ---------- Side rail ---------- */
.pv-side{display:flex;flex-direction:column;gap:24px;position:sticky;top:88px}
@media (max-width:900px){ .pv-side{position:static} }

/* ---------- Describe / image ----------
   Sits above the toggles because it is a shortcut TO them, not an alternative
   mode — applying a description visibly moves the chips below, which is what
   stops it feeling like a black box. */
.pv-ask{
  padding:15px;border-radius:var(--radius-lg);
  background:var(--surface-subtle);border:1px dashed var(--border-soft);
}
.pv-ask textarea{
  width:100%;padding:10px 12px;font-family:inherit;font-size:.9rem;line-height:1.5;
  background:var(--bg);color:var(--fg);
  border:1px solid var(--border-soft);border-radius:var(--radius-sm);resize:vertical;
  min-height:74px;
}
.pv-ask textarea:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.pv-ask-actions{display:flex;gap:8px;margin-top:10px;align-items:stretch}
.pv-ask-go{flex:1;padding:9px 14px;font-size:.86rem}
.pv-ask-img{
  padding:9px 12px;border-radius:var(--radius-sm);cursor:pointer;
  background:transparent;border:1px solid var(--border-soft);color:var(--fg-muted);
  font-family:inherit;font-size:.82rem;white-space:nowrap;
  transition:all var(--transition-interactive);
}
.pv-ask-img:hover{border-color:var(--accent);color:var(--accent)}
.pv-ask-note{margin-top:10px;font-size:.76rem;line-height:1.5;color:var(--fg-muted)}

/* ---------- Controls ---------- */
.pv-controls{display:flex;flex-direction:column;gap:20px}
@media (max-width:900px){ .pv-controls{flex-direction:row;flex-wrap:wrap;gap:16px} }

.pv-label{
  display:block;font-size:.7rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-muted);margin-bottom:9px;
}
.pv-row{display:flex;flex-wrap:wrap;gap:6px}
.pv-chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 11px;border-radius:var(--radius-sm);cursor:pointer;
  background:var(--bg-elev);border:1px solid var(--border-soft);color:var(--fg-muted);
  font-size:.82rem;font-family:inherit;
  transition:all var(--transition-interactive);
}
.pv-chip:hover{border-color:var(--border-accent);color:var(--fg)}
.pv-chip.is-on{border-color:var(--accent);color:var(--fg);background:color-mix(in srgb,var(--accent) 12%,var(--bg-elev))}
.pv-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.pv-swatch{display:inline-flex;border-radius:3px;overflow:hidden;height:15px;width:30px;flex:none}
.pv-swatch i{flex:1}
.pv-aa{font-size:1.05rem;line-height:1;flex:none}

/* ---------- Stage ---------- */
.pv-stage{
  border:1px solid var(--border-soft);border-radius:var(--radius-lg);
  overflow:hidden;background:var(--bg-elev-2);
}
.pv-bar{
  display:flex;align-items:center;gap:16px;
  padding:9px 14px;border-bottom:1px solid var(--border-soft);background:var(--bg-elev);
}
.pv-dots{display:flex;gap:6px;flex:none}
.pv-dots i{width:10px;height:10px;border-radius:50%;background:var(--border-soft)}
.pv-widths{display:flex;gap:4px;margin-left:auto}
.pv-widths button{
  padding:5px 11px;border-radius:100px;border:1px solid transparent;background:transparent;
  color:var(--fg-muted);font-size:.76rem;font-family:inherit;cursor:pointer;
  transition:all var(--transition-interactive);
}
.pv-widths button:hover{color:var(--fg)}
.pv-widths button.is-on{background:var(--accent);color:var(--accent-ink);font-weight:600}

#previewFrame{
  display:block;width:100%;max-width:100%;height:min(70vh,720px);border:0;
  background:#fff;margin-inline:auto;
  transition:max-width .35s var(--ease-out);
}