/* ============================================================
   Website Builder — the websites prompt builder.
   Gallery cards reuse .folder from ideas.css.
   ============================================================ */

.wp{
  flex:1; overflow-y:auto;
  padding:24px 22px 96px;
}
.wp__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 340px;
  gap:20px; align-items:start;
  max-width:1120px; margin:0 auto;
}
.wp__form{ display:flex; flex-direction:column; gap:12px; min-width:0; }
.wp__side{
  position:sticky; top:16px;
  display:flex; flex-direction:column; gap:12px;
  min-width:0;
}

.wp-box,
.wp-group{
  background:var(--surface);
  border:1px solid var(--hair);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
}
.wp-box{ padding:16px; }

/* visually hidden, still focusable and announced */
.wp-hide{
  position:absolute; width:1px; height:1px;
  margin:0; padding:0; opacity:0;
  overflow:hidden; clip:rect(0 0 0 0);
}

/* ── gallery card ────────────────────────────────────────── */
.wp-card__state{
  display:inline-flex; align-items:center; gap:5px;
  margin-top:6px;
  font-size:12px; color:var(--faint);
}
.wp-card__state.is-ready{ color:var(--accent-ink); font-weight:500; }
.wp-card__state svg{ width:13px; height:13px; stroke-width:2.5; }

/* ── groups ──────────────────────────────────────────────── */
.wp-group__head{
  display:flex; align-items:center; gap:12px;
  width:100%; padding:14px 16px;
  border-radius:var(--r-lg);
  text-align:left;
  transition:background .14s var(--ease);
}
.wp-group__head:hover{ background:var(--surface-2); }
.wp-group.is-open .wp-group__head{ border-radius:var(--r-lg) var(--r-lg) 0 0; }
.wp-group__text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.wp-group__title{ font-size:15px; font-weight:600; letter-spacing:-.01em; }
.wp-group__sub{ font-size:13px; color:var(--muted); }
.wp-group__need{
  flex:none;
  display:inline-flex; align-items:center;
  height:22px; padding:0 9px;
  border-radius:var(--pill);
  background:var(--accent-tint); color:var(--accent-ink);
  font-size:12px; font-weight:500; white-space:nowrap;
}
.wp-group__head > svg{
  flex:none; width:18px; height:18px; color:var(--faint);
  transition:transform .18s var(--ease);
}
.wp-group.is-open .wp-group__head > svg{ transform:rotate(180deg); }
.wp-group__body{
  display:flex; flex-direction:column; gap:22px;
  padding:16px 16px 18px;
  border-top:1px solid var(--hair);
}

/* ── one question ────────────────────────────────────────── */
.wp-q{ display:flex; flex-direction:column; gap:8px; border-radius:var(--r-sm); }
.wp-q__head{ display:flex; align-items:flex-start; gap:9px; }
.wp-q__num{
  flex:none;
  display:inline-grid; place-items:center;
  min-width:22px; height:22px; padding:0 6px;
  border-radius:var(--pill);
  background:var(--hair); color:var(--muted);
  font-size:11.5px; font-weight:600;
  font-variant-numeric:tabular-nums;
}
.wp-q__label{ flex:1; min-width:0; padding-top:1px; font-size:14px; font-weight:500; line-height:1.45; }
.wp-q__req{ flex:none; padding-top:2px; font-size:12px; color:var(--faint); }
.wp-q__req.is-req{ color:var(--accent-ink); font-weight:500; }
.wp-q__body{ display:flex; flex-direction:column; gap:8px; padding-left:31px; }
.wp-q__help{ font-size:13px; color:var(--muted); }

/* the first missing question, after Generate was pressed too early */
.wp-q.is-flagged{ animation:wp-flag 1.8s var(--ease); }
@keyframes wp-flag{
  0%, 45%{ box-shadow:0 0 0 7px var(--danger-tint); }
  100%{ box-shadow:0 0 0 7px rgba(253,237,236,0); }
}

.wp-ta{ min-height:0; max-height:420px; resize:vertical; }

/* chips (several choices) */
.wp-chips{ display:flex; flex-wrap:wrap; gap:7px; }
.wp-chip{
  position:relative;
  display:inline-flex; align-items:center; gap:5px;
  height:32px; padding:0 12px;
  border:1px solid var(--hair-2); border-radius:var(--pill);
  background:var(--surface); color:var(--ink);
  font-size:13.5px;
  cursor:pointer; user-select:none;
  transition:background .14s var(--ease), border-color .14s var(--ease), color .14s var(--ease);
}
.wp-chip:hover{ border-color:var(--accent-border); }
.wp-chip.is-on{
  background:var(--accent-tint); border-color:var(--accent-border);
  color:var(--accent-ink); font-weight:500;
}
.wp-chip__tick{ display:none; }
.wp-chip__tick svg{ width:13px; height:13px; stroke-width:2.5; }
.wp-chip.is-on .wp-chip__tick{ display:inline-flex; margin-left:-3px; }

/* switches (on/off) */
.wp-switches{
  border:1px solid var(--hair);
  border-radius:var(--r-md);
  overflow:hidden;
}
.wp-switch{
  position:relative;
  display:flex; align-items:center; gap:12px;
  min-height:44px; padding:9px 12px;
  border-top:1px solid var(--hair);
  font-size:14px;
  cursor:pointer;
  transition:background .14s var(--ease);
}
.wp-switch:first-child{ border-top:0; }
.wp-switch:hover{ background:var(--surface-2); }
.wp-switch__text{ flex:1; min-width:0; }
.wp-switch__track{
  position:relative; flex:none;
  width:36px; height:22px;
  border-radius:99px;
  background:#D5D9DE;
  transition:background .16s var(--ease);
}
.wp-switch__track::after{
  content:""; position:absolute; top:3px; left:3px;
  width:16px; height:16px; border-radius:50%;
  background:#fff;
  box-shadow:0 1px 2px rgba(20,26,38,.25);
  transition:transform .16s var(--ease);
}
.wp-hide:checked + .wp-switch__track{ background:var(--accent); }
.wp-hide:checked + .wp-switch__track::after{ transform:translateX(14px); }
.wp-hide:focus-visible + .wp-switch__track{ outline:2px solid var(--accent); outline-offset:2px; }

/* tiles (one choice) */
.wp-tiles{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; }
.wp-tile{
  position:relative;
  display:flex; flex-direction:column; gap:1px;
  padding:10px 12px;
  border:1px solid var(--hair-2); border-radius:var(--r-md);
  background:var(--surface);
  cursor:pointer;
  transition:border-color .14s var(--ease), background .14s var(--ease);
}
.wp-tile:hover{ border-color:var(--accent-border); }
.wp-tile.is-on{
  background:var(--accent-tint); border-color:var(--accent);
  box-shadow:inset 0 0 0 1px var(--accent);
}
.wp-tile__label{ font-size:14px; font-weight:500; }
.wp-tile.is-on .wp-tile__label{ color:var(--accent-ink); }
.wp-tile__desc{ font-size:12.5px; line-height:1.4; color:var(--muted); }

/* content source */
.wp-options{ display:flex; flex-direction:column; gap:8px; }
.wp-option{
  position:relative;
  display:flex; align-items:flex-start; gap:11px;
  padding:11px 13px;
  border:1px solid var(--hair-2); border-radius:var(--r-md);
  background:var(--surface);
  cursor:pointer;
  transition:border-color .14s var(--ease), background .14s var(--ease);
}
.wp-option:hover{ border-color:var(--accent-border); }
.wp-option.is-on{
  background:var(--accent-tint); border-color:var(--accent);
  box-shadow:inset 0 0 0 1px var(--accent);
}
.wp-option__dot{
  flex:none;
  display:grid; place-items:center;
  width:18px; height:18px; margin-top:1px;
  border:1.75px solid #C9CDD4; border-radius:50%;
  background:var(--surface);
}
.wp-option.is-on .wp-option__dot{ border-color:var(--accent); }
.wp-option.is-on .wp-option__dot::after{
  content:""; width:8px; height:8px; border-radius:50%; background:var(--accent);
}
.wp-option__text{ display:flex; flex-direction:column; min-width:0; }
.wp-option__label{ font-size:14px; font-weight:500; }
.wp-option__sub{ font-size:12.5px; color:var(--muted); }

.wp-follow{
  display:flex; flex-direction:column; gap:14px;
  margin-top:10px; padding:14px;
  border:1px solid var(--hair); border-radius:var(--r-md);
  background:var(--surface-2);
}
.wp-sub{ display:flex; flex-direction:column; gap:6px; }
.wp-sub__label{ font-size:13px; font-weight:500; color:var(--muted); }

.wp-chip:has(.wp-hide:focus-visible),
.wp-tile:has(.wp-hide:focus-visible),
.wp-option:has(.wp-hide:focus-visible){
  outline:2px solid var(--accent); outline-offset:2px;
}

/* ── side panel ──────────────────────────────────────────── */
.wp-status__top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.wp-status__pct{
  font-size:24px; font-weight:600; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.wp-status__bar{
  height:5px; margin:8px 0 10px;
  border-radius:99px; background:var(--hair);
  overflow:hidden;
}
.wp-status__bar i{
  display:block; height:100%; width:0;
  border-radius:99px; background:var(--accent);
  transition:width .3s var(--ease);
}
.wp-status__line{ margin-bottom:14px; font-size:13px; color:var(--muted); }
.wp-status__line.is-ready{ color:var(--accent-ink); }

.wp-save{
  display:inline-flex; align-items:center; gap:7px;
  font-size:12.5px; color:var(--faint); white-space:nowrap;
}
.wp-save[data-state="pending"],
.wp-save[data-state="saving"]{ color:var(--accent-ink); }
.wp-save[data-state="error"]{ color:var(--danger); font-weight:500; }
.wp-save__retry{
  padding:1px 9px;
  border-radius:var(--pill);
  background:var(--danger-tint); color:var(--danger);
  font-size:12px; font-weight:600;
}
.wp-save__retry:hover{ background:#F8D9D7; }
.wp-save--bar{ display:none; }

.wp-msg{
  margin-top:10px; padding:8px 11px;
  border-radius:var(--r-sm);
  background:var(--danger-tint); color:#9E322D;
  font-size:13px;
}

.wp-actions{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px; }
.wp-actions__reset{ grid-column:1 / -1; }

.wp-out__head{ display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.wp-out__title{ font-size:14px; }
.wp-out__time{ margin-left:auto; font-size:12px; color:var(--faint); white-space:nowrap; }
.wp-out__empty{ font-size:13px; color:var(--faint); }
.wp-out__text{
  margin:0;
  max-height:min(52vh, 540px); overflow:auto;
  padding:12px;
  border:1px solid var(--hair); border-radius:var(--r-sm);
  background:var(--surface-2); color:var(--ink);
  font-family:var(--mono); font-size:12px; line-height:1.6;
  white-space:pre-wrap; overflow-wrap:anywhere;
}

/* ── narrower screens ────────────────────────────────────── */
@media (max-width:960px){
  .wp__grid{ grid-template-columns:minmax(0,1fr); max-width:720px; }
  .wp__side{ position:static; }
  /* the panel sits below the questions, so the save state moves to the toolbar */
  .wp-save--bar{ display:inline-flex; }
  .wp-save--side{ display:none; }
}

@media (max-width:640px){
  .wp{ padding:14px 10px 84px; }
  .wp-group__head{ padding:13px 12px; }
  .wp-group__body{ gap:20px; padding:14px 12px 16px; }
  .wp-q__body{ padding-left:0; }
  .wp-tiles{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .wp-chip{ height:34px; }
}

@media (max-width:360px){
  .wp-tiles{ grid-template-columns:minmax(0,1fr); }
}