/* clickto.app — AI Builder overlay
 * ---------------------------------------------------------------------------
 * The full-screen guided flow behind every Actions card. It uses the numbered
 * step rail from the Start page so someone who has onboarded already
 * recognises it instantly.
 *
 * The launcher styles that used to live here are gone: the launcher moved into
 * the editor column and is styled in editor.css as .act-card.
 *
 * All tokens (--ink, --accent, --line, --code-bg, …) are defined on :root by
 * editor.css, which loads first. Everything is namespaced .pb-* so it can
 * never collide with .ed-* or .qe-*.
 * ---------------------------------------------------------------------------
 */

/* An author `display:` rule beats the browser's own [hidden]{display:none} —
   .pb-receipt sets display:block, so without this global reset it renders as
   an empty padded box while `hidden` is set. This must stay global, not
   scoped to .pb-overlay: that scoping is exactly the mistake that caused it
   the first time. */
[hidden]{ display:none !important; }

:root{
  --pb-r:14px;
  --pb-r-lg:20px;
}

/* =========================================================
   OVERLAY SHELL
   ========================================================= */
.pb-overlay{
  position:fixed; inset:0; z-index:500; background:var(--paper);
  display:flex; flex-direction:column;
}
.pb-top{
  flex:none; height:60px; display:flex; align-items:center; gap:.75rem;
  padding:0 1rem; background:var(--white); border-bottom:1px solid var(--line);
  box-shadow:var(--shadow-sm);
}
.pb-close{
  width:36px; height:36px; flex:none; border:0; border-radius:10px;
  background:var(--paper-2); color:var(--slate); cursor:pointer;
  display:grid; place-items:center; font-size:1rem;
  transition:background .15s, color .15s;
}
.pb-close:hover{ background:var(--line); color:var(--ink); }

.pb-top-title{ display:flex; align-items:center; gap:.6rem; min-width:0; }
.pb-top-ico{
  width:32px; height:32px; flex:none; border-radius:9px;
  background:var(--accent); color:#fff; display:grid; place-items:center; font-size:.95rem;
}
.pb-top-text{ display:flex; flex-direction:column; min-width:0; line-height:1.25; }
.pb-top-text b{ font-size:.94rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pb-top-text span{ font-size:.72rem; color:var(--slate); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.pb-modes{
  margin-left:auto; display:flex; gap:.15rem; background:var(--paper-2);
  padding:.24rem; border-radius:100px; flex:none;
}
.pb-modes button{
  border:0; background:transparent; border-radius:100px; cursor:pointer;
  padding:.46rem .8rem; font:600 .8rem 'Inter',system-ui,sans-serif; color:var(--slate);
  display:inline-flex; align-items:center; gap:.4rem; transition:background .15s, color .15s;
  white-space:nowrap;
}
.pb-modes button:hover{ color:var(--ink); }
.pb-modes button.active{ background:var(--white); color:var(--accent); box-shadow:var(--shadow-sm); }

.pb-body{ flex:1; min-height:0; overflow-y:auto; }
.pb-wrap{ max-width:830px; margin:0 auto; padding:2rem 1.5rem 6rem; }

/* =========================================================
   STEP RAIL
   ========================================================= */
.pb-step{ position:relative; padding-left:3rem; padding-bottom:2.2rem; }
.pb-step::before{
  content:""; position:absolute; left:15px; top:38px; bottom:.5rem; width:2px;
  border-radius:2px; background:linear-gradient(180deg,var(--line),rgba(230,227,218,.2));
}
.pb-step-last{ padding-bottom:0; }
.pb-step-last::before{ display:none; }

.pb-n{
  position:absolute; left:0; top:0; width:32px; height:32px; border-radius:50%;
  display:grid; place-items:center; z-index:1;
  font:700 .84rem 'Inter',system-ui,sans-serif; line-height:1;
  color:var(--accent); background:var(--white); border:2px solid #DEDAF8;
}
.pb-step.done .pb-n{ background:var(--accent); border-color:var(--accent); color:transparent; }
.pb-step.done .pb-n::after{
  content:"\2713"; position:absolute; inset:0; display:grid; place-items:center;
  color:#fff; font-size:1rem; font-weight:700; line-height:1;
}

.pb-step-h{ margin-bottom:1rem; }
.pb-step-h h2{ font-size:1.14rem; font-weight:700; line-height:1.25; }
.pb-step-h p{ margin-top:.3rem; font-size:.87rem; line-height:1.55; color:var(--slate); max-width:62ch; }

/* =========================================================
   TARGET PAGE PILL
   ========================================================= */
.pb-target{
  display:flex; align-items:center; gap:.6rem; margin-bottom:1rem;
  background:var(--lilac); border:1px solid #DEDAF8; border-radius:12px;
  padding:.6rem .8rem;
}
.pb-target i{ color:var(--accent-deep); font-size:1rem; flex:none; }
.pb-target-l{ font:600 .78rem 'Inter',system-ui,sans-serif; color:var(--accent-deep); flex:none; }
.pb-target select{
  flex:1; min-width:0; border:1px solid #CFCAF4; border-radius:9px; background:var(--white);
  padding:.42rem .6rem; font:600 .85rem 'Inter',system-ui,sans-serif; color:var(--ink); cursor:pointer;
}
.pb-target select:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(91,75,232,.14); }
.pb-target-one{ font:700 .88rem 'Inter',system-ui,sans-serif; color:var(--ink); }

/* =========================================================
   NAME + KIND
   ========================================================= */
.pb-label{ display:block; font:600 .82rem 'Inter',system-ui,sans-serif; color:var(--ink); margin-bottom:.45rem; }

.pb-name-row{ display:flex; gap:.7rem; align-items:flex-start; margin-bottom:1rem; flex-wrap:wrap; }
.pb-name-field{ flex:1 1 200px; min-width:0; }
.pb-name-field input{
  width:100%; border:1.5px solid var(--line); border-radius:11px; background:var(--white);
  padding:.72rem .85rem; font:500 .95rem 'Inter',system-ui,sans-serif; color:var(--ink);
  transition:border-color .15s, box-shadow .15s;
}
.pb-name-field input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 4px rgba(91,75,232,.11); }
.pb-name-hint{ font-size:.72rem; color:var(--slate); margin-top:.4rem; }

.pb-seg{
  display:inline-flex; background:var(--paper-2); border:1px solid var(--line);
  border-radius:12px; padding:3px; gap:3px; flex:none;
}
.pb-seg button{
  border:0; background:transparent; border-radius:9px; cursor:pointer;
  padding:.66rem .9rem; display:inline-flex; align-items:center; gap:.42rem;
  font:600 .85rem 'Inter',system-ui,sans-serif; color:var(--slate);
  transition:background .15s, color .15s, box-shadow .15s; white-space:nowrap;
}
.pb-seg button:hover{ color:var(--accent); }
.pb-seg button.active{ background:var(--white); color:var(--accent-deep); box-shadow:var(--shadow-sm); }

/* The brief IS the flow — everything downstream is written from it, so it
   carries the strongest visual weight on the page. */
.pb-brief-wrap{
  border-radius:16px; padding:.9rem .9rem 1rem;
  background:linear-gradient(180deg, rgba(91,75,232,.05), rgba(91,75,232,0) 55%), var(--white);
  border:1.5px solid #DEDAF8;
  box-shadow:0 1px 2px rgba(21,24,35,.04), 0 12px 28px -18px rgba(91,75,232,.35);
}
.pb-brief-label{
  display:flex; align-items:center; gap:.4rem; margin-bottom:.55rem;
  font:700 .78rem 'Inter',system-ui,sans-serif; color:var(--accent-deep);
}
.pb-brief-label i{ color:var(--accent); font-size:.85rem; }
.pb-brief{
  width:100%; min-height:7rem; resize:vertical;
  border:1.5px solid var(--line); border-radius:12px;
  background:var(--white); padding:1rem 1.1rem;
  font:400 1rem/1.65 'Inter',system-ui,sans-serif; color:var(--ink);
  transition:border-color .15s, box-shadow .15s;
}
.pb-brief::placeholder{ color:#9BA0AC; }
.pb-brief:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 5px rgba(91,75,232,.16); }
.pb-brief-wrap:focus-within{ border-color:var(--accent); box-shadow:0 1px 2px rgba(21,24,35,.04), 0 14px 32px -16px rgba(91,75,232,.45); }

.pb-egs{ margin-top:.9rem; }
.pb-egs-l{ display:block; font-size:.78rem; font-weight:600; color:var(--slate); margin-bottom:.5rem; }
.pb-egs-row{ display:flex; flex-wrap:wrap; gap:.4rem; }
.pb-eg{
  text-align:left; max-width:100%;
  font:400 .8rem/1.35 'Inter',system-ui,sans-serif; color:var(--ink-soft);
  background:var(--white); border:1px dashed #D6D3EA; border-radius:10px;
  padding:.45rem .7rem; cursor:pointer;
  transition:border-color .15s, color .15s, background .15s;
}
.pb-eg:hover{ border-style:solid; border-color:var(--accent); color:var(--accent-deep); background:rgba(91,75,232,.05); }

.pb-game-feats{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.8rem; }
.pb-gf{
  border:1px solid var(--line); background:var(--white); border-radius:100px;
  padding:.4rem .75rem; font:600 .76rem 'Inter',system-ui,sans-serif; color:var(--slate);
  cursor:pointer; display:inline-flex; align-items:center; gap:.35rem;
  transition:border-color .15s, color .15s, background .15s;
}
.pb-gf i{ font-size:.8rem; opacity:.7; }
.pb-gf.on{ border-color:var(--accent); color:var(--accent-deep); background:var(--lilac); }
.pb-gf.on i{ opacity:1; }

/* Errors we picked up on the person's behalf. */
.pb-caught{
  display:flex; gap:.6rem; align-items:flex-start; margin-top:.9rem;
  padding:.7rem .85rem; border-radius:12px;
  background:#ECF8F1; border:1px solid #C6E7D5;
}
.pb-caught i{ color:var(--ok); margin-top:.12rem; }
.pb-caught b{ display:block; font:600 .85rem 'Inter',system-ui,sans-serif; color:#1F6B47; }
.pb-caught span{ display:block; font:400 .78rem/1.45 'Inter',system-ui,sans-serif; color:#3E7A5D; margin-top:.1rem; }

/* =========================================================
   STYLE CARDS + COLOUR
   ========================================================= */
.pb-styles{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(138px,1fr));
  gap:.55rem; margin-bottom:1.3rem;
}
.pb-style{
  --sw-bg:#fff; --sw-ink:#151823; --sw-line:#E6E3DA; --sw-radius:8px;
  position:relative; display:flex; flex-direction:column; gap:.5rem; text-align:left;
  background:var(--white); border:1px solid var(--line); border-radius:var(--pb-r);
  padding:.5rem .5rem .65rem; cursor:pointer;
  transition:border-color .15s, box-shadow .15s, transform .15s;
}
.pb-style:hover{ border-color:#C9C6E8; transform:translateY(-1px); }
.pb-style.active{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(91,75,232,.13); }
.pb-style-prev{
  position:relative; height:58px; border-radius:9px; overflow:hidden; padding:.55rem .6rem;
  background:var(--sw-bg); border:1px solid var(--sw-line);
  display:flex; flex-direction:column; gap:.28rem; justify-content:center;
}
.pb-style-prev .h{ height:8px; width:62%; border-radius:3px; background:var(--sw-ink); }
.pb-style-prev .l{ height:4px; width:88%; border-radius:2px; background:var(--sw-ink); opacity:.32; }
.pb-style-prev .l.s{ width:64%; }
.pb-style-prev .b{ margin-top:.18rem; height:11px; width:40px; border-radius:var(--sw-radius); background:var(--pb-accent,#5B4BE8); }
.pb-style-prev .spark{ position:absolute; top:.32rem; right:.38rem; font-size:.76rem; color:var(--pb-accent,#5B4BE8); opacity:.85; }
.pb-style b{ font:600 .8rem 'Inter',system-ui,sans-serif; display:block; padding:0 .1rem; }
.pb-style span{ font:400 .7rem/1.3 'Inter',system-ui,sans-serif; color:var(--slate); padding:0 .1rem; }

.pb-colour{ display:flex; flex-wrap:wrap; align-items:center; gap:.55rem; }
.pb-colour .pb-label{ width:100%; margin-bottom:.1rem; }
.pb-sw{ display:flex; flex-wrap:wrap; gap:.42rem; }
.pb-sw button{
  width:30px; height:30px; border-radius:9px; cursor:pointer;
  border:2px solid transparent; box-shadow:inset 0 0 0 1px rgba(21,24,35,.08);
  transition:transform .15s, box-shadow .15s;
}
.pb-sw button:hover{ transform:translateY(-1px); }
.pb-sw button.active{ border-color:var(--white); box-shadow:0 0 0 2px var(--ink), inset 0 0 0 1px rgba(255,255,255,.3); }
.pb-custom{
  position:relative; display:inline-flex; align-items:center; gap:.4rem;
  border:1px solid var(--line); border-radius:10px; padding:.4rem .65rem;
  background:var(--white); cursor:pointer;
  font:500 .78rem 'Inter',system-ui,sans-serif; color:var(--slate);
  transition:border-color .15s, color .15s;
}
.pb-custom:hover{ border-color:var(--accent); color:var(--accent-deep); }
.pb-custom input{ position:absolute; inset:0; opacity:0; width:100%; height:100%; cursor:pointer; border:0; padding:0; }

/* =========================================================
   OPTIONAL EXTRAS — folded away by default. Every option behind this
   summary is one a beginner can safely never open.
   ========================================================= */

.pb-ctx-block{ padding-top:.6rem; }
.pb-ctx-block + .pb-ctx-block{ margin-top:.7rem; padding-top:.9rem; border-top:1px solid var(--paper-2); }

.pb-toggle{
  display:flex; align-items:center; gap:.7rem; width:100%; text-align:left;
  background:transparent; border:0; cursor:pointer; padding:.4rem 0;
}
.pb-toggle-track{ width:36px; height:21px; border-radius:999px; background:#D8D8E4; position:relative; flex:none; transition:background .18s; }
.pb-toggle-thumb{ position:absolute; top:2px; left:2px; width:17px; height:17px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.22); transition:transform .18s; }
.pb-toggle.on .pb-toggle-track{ background:var(--accent); }
.pb-toggle.on .pb-toggle-thumb{ transform:translateX(15px); }
.pb-toggle-text b{ display:block; font:600 .87rem/1.2 'Inter',system-ui,sans-serif; color:var(--ink); }
.pb-toggle-text span{ display:block; font:400 .77rem/1.35 'Inter',system-ui,sans-serif; color:var(--slate); margin-top:.1rem; }

/* Asset chips */
.pb-assets-wrap{ margin-top:.7rem; }
.pb-chip-bar{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-bottom:.55rem; flex-wrap:wrap; }
.pb-chip-count{ font:500 .74rem 'Inter',system-ui,sans-serif; color:var(--slate); }
.pb-chip-count.on{ color:var(--accent); font-weight:600; }
.pb-mini{
  font:600 .7rem 'Inter',system-ui,sans-serif; color:var(--slate); background:var(--white);
  border:1px solid var(--line); border-radius:7px; padding:.24rem .55rem; cursor:pointer;
  transition:border-color .15s, color .15s;
}
.pb-mini:hover{ border-color:#C9C6E8; color:var(--accent); }
.pb-mini:disabled{ opacity:.45; cursor:not-allowed; }
.pb-chip-row{ display:flex; flex-wrap:wrap; gap:.45rem; max-height:180px; overflow-y:auto; padding:.1rem; }
.pb-chip{
  position:relative; display:flex; align-items:center; gap:.4rem; text-align:left;
  border:1px solid var(--line); background:var(--white); border-radius:100px;
  padding:.32rem .7rem .32rem .32rem; cursor:pointer; max-width:220px;
  transition:border-color .15s, box-shadow .15s;
}
.pb-chip:hover{ border-color:#C9C6E8; }
.pb-chip.on{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(91,75,232,.12); }
.pb-chip img{ width:26px; height:26px; border-radius:50%; object-fit:cover; flex:none; }
.pb-chip i{ width:26px; height:26px; border-radius:50%; background:var(--paper-2); display:grid; place-items:center; color:var(--slate); font-size:.85rem; flex:none; }
.pb-chip-name{ font:600 .76rem 'Inter',system-ui,sans-serif; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pb-chip-meta{ font:500 .64rem 'Space Mono',monospace; color:var(--slate); white-space:nowrap; }
.pb-asset-empty{ font:400 .82rem/1.5 'Inter',system-ui,sans-serif; color:var(--slate); }
.pb-asset-empty b{ color:var(--ink); }

/* =========================================================
   PROMPT + COPY + AI LINKS
   ========================================================= */
.pb-prompt-wrap{ position:relative; margin-bottom:1.1rem; }
.pb-prompt{
  margin:0; max-height:170px; overflow:hidden;
  background:var(--code-bg); color:var(--code-fg);
  border:1px solid var(--code-line); border-radius:var(--pb-r);
  padding:1.05rem 1.15rem 2.9rem;
  font:400 .78rem/1.6 'Space Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  white-space:pre-wrap; word-break:break-word;
}
.pb-prompt-wrap.open .pb-prompt{ max-height:min(58vh,600px); overflow:auto; }
.pb-prompt-wrap::after{
  content:""; position:absolute; left:1px; right:1px; bottom:1px; height:92px;
  border-radius:0 0 var(--pb-r) var(--pb-r); pointer-events:none;
  background:linear-gradient(180deg,rgba(27,30,43,0) 0%,rgba(27,30,43,.86) 55%,rgba(27,30,43,.97) 100%);
}
.pb-prompt-wrap.open::after{ height:56px; background:linear-gradient(180deg,rgba(27,30,43,0),rgba(27,30,43,.9)); }
.pb-more{
  position:absolute; left:50%; bottom:.85rem; transform:translateX(-50%); z-index:2;
  display:inline-flex; align-items:center; gap:.4rem; cursor:pointer;
  padding:.42rem .9rem; border-radius:100px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  color:#C7C2F0; font:600 .76rem 'Inter',system-ui,sans-serif; line-height:1;
  transition:background .16s, color .16s, border-color .16s;
}
.pb-more:hover{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.3); color:#fff; }
.pb-more i{ font-size:.72rem; transition:transform .2s; }
.pb-prompt-wrap.open .pb-more i{ transform:rotate(180deg); }

.pb-copy{ width:100%; max-width:330px; justify-content:center; }
.pb-copy.done{ background:var(--ok) !important; }

.pb-ais{ margin-top:1.2rem; }
.pb-ais-l{ display:block; font:500 .82rem 'Inter',system-ui,sans-serif; color:var(--slate); margin-bottom:.55rem; }
.pb-ais.armed .pb-ais-l{ color:var(--accent-deep); font-weight:600; }
.pb-ais-row{ display:flex; flex-wrap:wrap; gap:.5rem; }
.pb-ai{
  display:inline-flex; align-items:center; gap:.5rem;
  border:1px solid var(--line); border-radius:100px; padding:.55rem .95rem;
  background:var(--white); font:600 .85rem 'Inter',system-ui,sans-serif; color:var(--ink);
  transition:border-color .15s, box-shadow .15s, transform .15s;
}
.pb-ai:hover{ border-color:var(--accent); transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.pb-ais.armed .pb-ai{ border-color:#CFCAF4; }
.pb-ai i{ font-size:.72rem; color:var(--slate); }
.pb-ai-m{ width:21px; height:21px; border-radius:7px; display:grid; place-items:center; font:700 .7rem 'Inter',sans-serif; color:#fff; }
.pb-ai-claude{ background:#D97757; }
.pb-ai-gpt{ background:#10A37F; }
.pb-ai-gem{ background:#4285F4; }

/* =========================================================
   THE PASTE TRAY — one box, one paste.
   ========================================================= */
.pb-drop{
  background:var(--white); border:1.5px solid var(--line);
  border-radius:var(--pb-r-lg); overflow:hidden; box-shadow:var(--shadow-sm);
  transition:border-color .3s ease;
}
.pb-drop.pb-armed{ border-color:var(--accent); animation:pbPulse 1.9s ease-in-out infinite; }
@keyframes pbPulse{
  0%,100%{ box-shadow:var(--shadow-sm), 0 0 0 0 rgba(91,75,232,.35); }
  50%{ box-shadow:var(--shadow-sm), 0 0 0 8px rgba(91,75,232,0); }
}
@media(prefers-reduced-motion:reduce){
  .pb-drop.pb-armed{ animation:none; box-shadow:var(--shadow-sm), 0 0 0 3px rgba(91,75,232,.22); }
}
.pb-drop.has{ border-color:#BFE6D1; }

.pb-drop-head{
  display:flex; align-items:center; gap:.8rem; flex-wrap:wrap;
  padding:.85rem 1rem; background:var(--paper-2); border-bottom:1px solid var(--line);
}
.pb-drop-head-t{ flex:1; min-width:160px; }
.pb-drop-head-t b{ display:block; font:700 .9rem 'Inter',system-ui,sans-serif; color:var(--ink); }
.pb-drop-head-t span{ display:block; font:400 .78rem/1.4 'Inter',system-ui,sans-serif; color:var(--slate); margin-top:.12rem; }
.pb-paste-btn{
  flex:none; display:inline-flex; align-items:center; gap:.45rem;
  border:0; border-radius:100px; cursor:pointer;
  background:var(--accent); color:#fff; padding:.58rem 1.05rem;
  font:600 .84rem 'Inter',system-ui,sans-serif; line-height:1;
  box-shadow:0 8px 18px -8px rgba(91,75,232,.65);
  transition:background .15s, transform .15s;
}
.pb-paste-btn:hover{ background:var(--accent-deep); transform:translateY(-1px); }
.pb-paste-btn:active{ transform:translateY(0); }

.pb-paste-box{
  display:block; width:100%; min-height:180px; resize:vertical; border:0; outline:none;
  background:var(--code-bg); color:var(--code-fg);
  padding:1rem 1.1rem;
  font:400 .76rem/1.6 'Space Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  white-space:pre; overflow:auto;
}
.pb-paste-box::placeholder{ color:#6E7496; font-family:'Inter',system-ui,sans-serif; font-size:.86rem; }
.pb-paste-box:focus{ box-shadow:inset 0 0 0 2px var(--accent); }

.pb-receipt{ display:block; padding:1rem 1.1rem 1.1rem; background:#F4FBF7; }
.pb-receipt-top{ display:flex; align-items:flex-start; gap:.65rem; flex-wrap:wrap; }
.pb-receipt-top > i{ color:var(--ok); font-size:1.15rem; margin-top:.05rem; }
.pb-receipt-t{ flex:1; min-width:170px; }
.pb-receipt-t b{ display:block; font:700 .92rem 'Inter',system-ui,sans-serif; color:#1F6B47; line-height:1.3; }
.pb-receipt-t span{ display:block; font:400 .8rem/1.45 'Inter',system-ui,sans-serif; color:#3E7A5D; margin-top:.12rem; }
.pb-receipt-bits{ display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.85rem; }
.pb-bit{
  display:inline-flex; align-items:center; gap:.4rem;
  background:var(--white); border:1px solid #C6E7D5; border-radius:100px;
  padding:.34rem .75rem; font:600 .76rem 'Inter',system-ui,sans-serif; color:#1F6B47;
}
.pb-bit em{ font-style:normal; font-weight:500; color:#5A8F74; font-size:.72rem; }
.pb-bit.off{ border-color:var(--line); color:var(--slate); }
.pb-bit.off em{ color:var(--slate); }
.pb-bit.off i{ opacity:.5; }

/* =========================================================
   APPLY
   ========================================================= */
.pb-apply-card{
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--pb-r-lg); padding:1.3rem; box-shadow:var(--shadow-sm);
}
.pb-apply-summary{
  display:flex; gap:.6rem; align-items:flex-start; margin-bottom:1rem;
  font:500 .87rem/1.5 'Inter',system-ui,sans-serif; color:var(--ink-soft);
}
.pb-apply-summary i{ color:var(--accent); margin-top:.15rem; }
.pb-apply-summary b{ color:var(--ink); }
.pb-go{ width:100%; justify-content:center; padding-top:.9rem; padding-bottom:.9rem; }
.pb-readonly-note{
  display:flex; gap:.5rem; align-items:flex-start; margin-top:.9rem;
  padding:.7rem .85rem; border-radius:11px; background:#FDF0ED; border:1px solid #F2CDC5;
  color:#8E3625; font:500 .84rem/1.5 'Inter',system-ui,sans-serif;
}
.pb-readonly-note a{ color:var(--accent-deep); font-weight:600; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media(max-width:860px){
  .pb-modes button span{ display:none; }
  .pb-name-field{ flex:1 1 8px; min-width:0; }
  .pb-modes button{ padding:.5rem .7rem; }
}

@media(max-width:720px){
  .pb-top{ padding:0 .6rem; gap:.5rem; }
  .pb-top-text span{ display:none; }
  .pb-wrap{ padding:1.3rem 1rem 5rem; }
  .pb-step{ padding-left:2.4rem; padding-bottom:1.9rem; }
  .pb-step::before{ left:12px; top:34px; }
  .pb-n{ width:26px; height:26px; font-size:.76rem; }
  .pb-step-h h2{ font-size:1.03rem; }

  .pb-name-row{ flex-direction:column; align-items:stretch; }
  .pb-seg button{ flex:1; justify-content:center; padding:.62rem .4rem; font-size:.82rem; }

  .pb-brief-wrap{ padding:.8rem .8rem .9rem; }
  .pb-brief{ min-height:6.5rem; font-size:.95rem; padding:.9rem 1rem; }

  .pb-styles{ grid-template-columns:repeat(2,1fr); }
  .pb-copy{ max-width:none; padding-top:.9rem; padding-bottom:.9rem; }
  .pb-ai{ flex:1; justify-content:center; padding:.7rem .5rem; }

  /* On a phone the Paste button is the whole story — the box below it is a
     fallback, not the main road. */
  .pb-drop-head{ padding:.8rem .8rem; }
  .pb-paste-btn{ width:100%; justify-content:center; padding:.8rem; font-size:.9rem; }
  .pb-paste-box{ min-height:130px; font-size:.72rem; }
  .pb-receipt{ padding:.9rem .85rem 1rem; }
  .pb-receipt-top > i{ font-size:1.05rem; }
}

@media(prefers-reduced-motion:reduce){
  .pb-style, .pb-sw button, .pb-ai, .pb-more i, .pb-paste-btn{ transition:none; }
}

/* ---------------------------------------------------------------------------
   Kind picker — page / tool / game
   This used to be three stacked explanatory cards, which pushed "Describe the
   page" — the field that actually matters — most of a screen down. It's now a
   one-line segmented control with a single line of help underneath, so the
   description stays where the eye lands.
   --------------------------------------------------------------------------- */
.pb-kind-row{
  display:flex; align-items:center; flex-wrap:wrap; gap:.5rem .6rem; margin:0 0 .9rem;
}
.pb-kind-l{
  font:600 .78rem 'Inter',system-ui,sans-serif; color:var(--slate); flex:none;
}
.pb-kinds{
  display:inline-flex; gap:.15rem; flex:none;
  background:var(--paper-2); border:1px solid var(--line); border-radius:100px; padding:.2rem;
}
.pb-kinds button{
  display:inline-flex; align-items:center; gap:.35rem; cursor:pointer; font-family:inherit;
  background:transparent; border:0; border-radius:100px; padding:.35rem .7rem;
  font:600 .8rem 'Inter',system-ui,sans-serif; color:var(--slate);
  transition:background .15s, color .15s, box-shadow .15s;
}
.pb-kinds button:hover{ color:var(--ink); }
.pb-kinds button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.pb-kinds button > i{ font-size:.9rem; }
.pb-kinds button.active{
  background:var(--white); color:var(--accent-deep);
  box-shadow:0 1px 2px rgba(24,22,40,.1);
}
/* Breaks to its own line on narrow screens rather than squeezing the pills. */
.pb-kind-hint{
  flex:1 1 100%; font:400 .755rem/1.45 'Inter',system-ui,sans-serif; color:var(--slate);
}
@media (min-width:620px){
  .pb-kind-hint{ flex:1 1 auto; min-width:14ch; }
}

/* ---------------------------------------------------------------------------
   Pre-flight list — sits just above the big button on the last step
   By the time you've scrolled here, the field you skipped is a screen and a
   half above you. This names it and jumps back to it.
   --------------------------------------------------------------------------- */
.pb-ready{
  border:1px solid var(--line); border-radius:14px; background:var(--white);
  padding:.75rem .8rem .5rem; margin-bottom:.85rem;
}
.pb-ready-h{ display:flex; align-items:baseline; justify-content:space-between; gap:.6rem; margin-bottom:.5rem; }
.pb-ready-h b{ font:700 .85rem 'Inter',system-ui,sans-serif; color:var(--ink); }
.pb-ready-n{ font:700 .7rem 'Space Mono',monospace; color:var(--slate); white-space:nowrap; }
.pb-ready-n.ok{ color:var(--ok); }
.pb-ready-rows{ display:flex; flex-direction:column; }
.pb-ready-row{
  display:flex; align-items:center; gap:.55rem; width:100%; text-align:left;
  border:0; background:transparent; border-radius:9px; padding:.4rem .35rem;
  cursor:pointer; font-family:inherit; transition:background .14s;
}
.pb-ready-row:hover{ background:var(--paper-2); }
.pb-ready-row:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.pb-ready-tick{
  width:18px; height:18px; flex:none; border-radius:50%; display:grid; place-items:center;
  font-size:.6rem; border:1.5px solid #E3B15A; background:#FFF6E6; color:#B27400;
}
.pb-ready-row.done .pb-ready-tick{ background:var(--ok); border-color:var(--ok); color:#fff; }
.pb-ready-l{ flex:1; min-width:0; font:600 .8rem 'Inter',system-ui,sans-serif; color:var(--ink); }
.pb-ready-row.done .pb-ready-l{ font-weight:500; color:var(--slate); }
.pb-ready-v{
  flex:none; font:600 .7rem 'Space Mono',monospace; color:#B27400;
  max-width:16ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pb-ready-row.done .pb-ready-v{ color:var(--slate); font-weight:400; }
.pb-ready-foot{
  margin:.35rem .35rem .25rem; font:400 .72rem 'Inter',system-ui,sans-serif; color:var(--slate);
}

/* ---------------------------------------------------------------------------
   Photos — a real step now, not a fold
   --------------------------------------------------------------------------- */
.pb-photos{
  margin-top: 1rem;
  border:1.5px solid var(--line); border-radius:14px; padding:.85rem .9rem; background:var(--white);
  transition:border-color .15s, background .15s;
}
.pb-photos.on{ border-color:#C9C4EE; background:rgba(91,75,232,.035); }
.pb-photos-empty{ border-style:dashed; text-align:center; }
.pb-photos-head{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-bottom:.5rem; }
.pb-photos-empty .pb-photos-head{ justify-content:center; }
.pb-photos-t{
  display:flex; align-items:center; gap:.45rem;
  font:700 .84rem 'Inter',system-ui,sans-serif; color:var(--ink);
}
.pb-photos-t i{ color:var(--accent); }
.pb-photos-t em{
  font:700 .6rem 'Space Mono',monospace; font-style:normal; letter-spacing:.06em;
  text-transform:uppercase; color:var(--slate); background:var(--paper-2);
  border:1px solid var(--line); border-radius:100px; padding:.14rem .4rem;
}
.pb-photos-n{ font:600 .7rem 'Space Mono',monospace; color:var(--accent-deep); white-space:nowrap; }
.pb-photos-p{ font:400 .78rem/1.5 'Inter',sans-serif; color:var(--slate); margin:.15rem 0 .7rem; }
.pb-photos-up,
.pb-photos-more{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  font:600 .8rem 'Inter',sans-serif; cursor:pointer; font-family:inherit;
  border-radius:9px; padding:.55rem .8rem; transition:background .15s;
}
.pb-photos-up{ width:100%; color:var(--accent-deep); background:var(--lilac); border:1px solid #D6D1F5; }
.pb-photos-up:hover{ background:#E6E2FB; }
.pb-photos-more{ margin-top:.6rem; color:var(--slate); background:transparent; border:1px solid var(--line); }
.pb-photos-more:hover{ background:var(--paper-2); color:var(--ink); }

/* ---------------------------------------------------------------------------
   Which chat — the single most consequential choice in the builder
   --------------------------------------------------------------------------- */
.pb-chat-q{
  display:flex; align-items:center; gap:.45rem; margin-bottom:.55rem;
  font:700 .84rem 'Inter',system-ui,sans-serif; color:var(--ink);
}
.pb-chat-q i{ color:var(--accent); }
.pb-chat-opts{ display:grid; gap:.5rem; }
@media (min-width:560px){ .pb-chat-opts{ grid-template-columns:1fr 1fr; } }
.pb-chat-opts button{
  display:grid; grid-template-columns:auto 1fr; column-gap:.6rem; row-gap:.12rem;
  align-items:center; text-align:left; cursor:pointer; font-family:inherit;
  background:var(--white); border:1.5px solid var(--line); border-radius:12px;
  padding:.7rem .8rem; transition:border-color .15s, background .15s, box-shadow .15s;
}
.pb-chat-opts button:hover{ border-color:#C9C4EE; }
.pb-chat-opts button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.pb-chat-opts button > i{ grid-row:1 / span 2; font-size:1.05rem; color:var(--slate); }
.pb-chat-opts button b{ font:700 .85rem/1.25 'Inter',system-ui,sans-serif; color:var(--ink); }
.pb-chat-opts button span{ font:400 .74rem/1.35 'Inter',system-ui,sans-serif; color:var(--slate); }
.pb-chat-opts button.active{
  border-color:var(--accent); background:rgba(91,75,232,.05);
  box-shadow:0 0 0 3px rgba(91,75,232,.1);
}
.pb-chat-opts button.active > i,
.pb-chat-opts button.active b{ color:var(--accent-deep); }

/* The "match my site" toggle now lives inside the new-chat branch of the
   question, so it needs a seam rather than floating on its own. */
.pb-chat .pb-ctx-block{ margin-top:.75rem; padding-top:.8rem; border-top:1px solid var(--line); }

.pb-chat-warn,
.pb-chat-ok,
.pb-chat-tip{
  display:flex; gap:.5rem; align-items:flex-start; margin:.7rem 0 0;
  font:400 .78rem/1.5 'Inter',system-ui,sans-serif; border-radius:11px; padding:.65rem .75rem;
}
.pb-chat-warn{ color:#8A5200; background:#FFF6E6; border:1px solid #F3DFB8; }
.pb-chat-warn i{ color:#C77700; margin-top:.12rem; }
.pb-chat-warn b{ font-weight:700; color:#6E4200; }
.pb-chat-ok{ color:#2F7A52; background:#EDF9F1; border:1px solid #CBE9D7; }
.pb-chat-ok i{ color:var(--ok); margin-top:.12rem; }
.pb-chat-tip{ color:var(--ink-soft); background:var(--paper-2); border:1px solid var(--line); margin:0 0 .8rem; }
.pb-chat-tip i{ color:var(--accent); margin-top:.12rem; }
.pb-chat-tip b{ font-weight:700; color:var(--ink); }

/* The new match color button added 07-30 */
.pb-sw .pb-clr-auto {
  /* override any circle sizing the base swatch rule applies to buttons */
  width: auto;
  min-width: 0;
  height: 34px;
  flex: 0 0 auto;

  display: inline-flex;
  align-items: center;
  gap: .38rem;
  padding: 0 .8rem;
  margin-right: .15rem;

  border: 1.5px solid #E1DDF6;
  border-radius: 999px;
  background: #fff;

  color: #4A4570;
  font: 600 .82rem/1 "Inter", system-ui, -apple-system, sans-serif;
  letter-spacing: .005em;
  white-space: nowrap;
  cursor: pointer;

  transition: transform .12s ease, box-shadow .18s ease,
              border-color .18s ease, color .18s ease;
}

.pb-sw .pb-clr-auto:hover {
  border-color: #C6BCF3;
  color: #2A2550;
  transform: translateY(-1px);
}

.pb-sw .pb-clr-auto:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(91, 75, 232, .28);
}

/* Gradient sparkle — nods to the "You choose" style card's ✦ */
.pb-sw .pb-clr-auto .pb-clr-auto-spark {
  font-size: .92em;
  line-height: 1;
  color: #5B4BE8; /* fallback where background-clip:text is unsupported */
  background: linear-gradient(120deg, #5B4BE8, #9333EA 55%, #0EA5A4);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Selected: filled gradient pill, white text */
.pb-sw .pb-clr-auto.active {
  border-color: transparent;
  color: #fff;
  background: linear-gradient(120deg, #5B4BE8, #7A3FE4 55%, #0EA5A4);
  box-shadow: 0 2px 10px rgba(91, 75, 232, .35);
}

.pb-sw .pb-clr-auto.active:hover {
  color: #fff;
  transform: translateY(-1px);
}

.pb-sw .pb-clr-auto.active .pb-clr-auto-spark {
  color: #fff;
  background: none;
  -webkit-text-fill-color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .pb-sw .pb-clr-auto { transition: none; }
  .pb-sw .pb-clr-auto:hover,
  .pb-sw .pb-clr-auto.active:hover { transform: none; }
}


.pb-colour {
  /* the row that holds "Main colour" label + .pb-sw + .pb-custom */
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem .6rem;
}

.pb-sw {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
}

.pb-sw button {
  align-self: center;
}

.pb-sw .pb-clr-auto {
  height: 30px;
  align-self: center;
  margin-right: 0;
  box-sizing: border-box;
}


.pb-custom {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  align-self: center;
}