/* siteseconds.com — 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-*.
 * ---------------------------------------------------------------------------
 */

/* =========================================================================
   WHAT YOU'RE CHANGING — the card at the top of an edit that came from a
   click on the page (see targetCardHtml in prompt.js).
   ========================================================================= */
.pb-what{
  display:flex; gap:1rem; align-items:center;
  margin:0 0 1rem; padding:.75rem .8rem;
  border:1px solid #DCD7F5; border-radius:14px;
  background:linear-gradient(135deg,#F7F5FE,#FFFFFF 70%);
}
/* THE FRAME IS ONE SIZE. The picture (static/js/snapshot.js, fit:"box") is
   centred inside it, so the card is the same shape before, during and after
   the picture arrives. While it is on its way the frame shimmers; if none
   comes, the cursor stays and the shimmer stops. */
.pb-what-frame{
  position:relative; flex:none; width:136px; height:92px; border-radius:10px; overflow:hidden;
  background:
    radial-gradient(circle at 1px 1px, rgba(91,75,232,.16) 1px, transparent 1.5px) 0 0/10px 10px,
    #F1EFFA;
  box-shadow:inset 0 0 0 1px rgba(91,75,232,.14);
}
.pb-what-frame.has-snap{ background:#fff; box-shadow:inset 0 0 0 1px rgba(91,75,232,.22), 0 6px 16px -10px rgba(20,18,45,.35); }
.pb-what-frame.is-loading::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, transparent 20%, rgba(255,255,255,.7) 50%, transparent 80%);
  transform:translateX(-100%); animation:pbShimmer 1.4s ease-in-out infinite;
}
@keyframes pbShimmer{ to{ transform:translateX(100%); } }
.pb-what-snap{
  position:absolute; inset:0; display:grid; place-items:center;
  color:#9C93E0; font-size:1.15rem;
}
.pb-what-snap.snap-on{ color:transparent; }
.pb-what-t{ min-width:0; display:flex; flex-direction:column; gap:.15rem; }
.pb-what-eyebrow{ font:700 .64rem/1 'Space Mono',ui-monospace,monospace; letter-spacing:.08em; text-transform:uppercase; color:#8A87A3; }
.pb-what-t b{ font:600 .9rem/1.3 'Inter',system-ui,sans-serif; color:var(--ink,#151823); overflow-wrap:anywhere; }
.pb-what-repick{
  align-self:flex-start; margin-top:.25rem; padding:.3rem .6rem;
  border:1px solid #DCD7F5; border-radius:100px; background:#fff; color:#4536C4;
  font:600 .74rem/1 'Inter',system-ui,sans-serif; cursor:pointer; display:inline-flex; align-items:center; gap:.3rem;
}
.pb-what-repick:hover{ background:#F3F0FF; border-color:#C3B9F2; }
@media(max-width:560px){
  .pb-what{ flex-direction:column; align-items:stretch; }
  .pb-what-frame{ width:100%; height:104px; }
}
@media(prefers-reduced-motion:reduce){
  .pb-what-frame.is-loading::after{ animation:none; }
}

/* 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;
}
/* The "hand it to an AI" guide, reused here on top of the builder's own
   full-screen overlay (z-index:500) — same .hm-overlay/.hm-modal the
   homepage and /start use, just raised above it. Doubled-up selector (not
   just .pb-guide-overlay) because .hm-overlay's own z-index rule is defined
   later in this file and would otherwise win on source order alone. */
.hm-overlay.pb-guide-overlay{ z-index:600; }
.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; }

/* =========================================================
   THE MINI CARD (prompt.js miniFlowHtml)
   The overlay becomes the homepage's dimmed backdrop with the homepage's
   own guide card in the middle (.hm-modal.hm-modal-wide, defined below —
   the card carries those classes, so it IS that card). The builder's
   header is not drawn: the card carries its own close. Only what the
   editor adds is styled here.
   ========================================================= */
.pb-overlay.is-mini{
  background:rgba(21,24,35,.58); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  align-items:center; justify-content:center; padding:1.25rem;
}
.pb-overlay.is-mini .pb-top{ display:none; }
.pb-overlay.is-mini .pb-body{ flex:0 1 auto; width:100%; max-width:500px; overflow:visible; }
.pb-overlay.is-mini .pb-wrap{ max-width:none; padding:0; }
.pb-mini .hm-modal-eyebrow.is-off{ color:#8A6414; background:#FFF6E6; }
.pb-mini .hm-modal-eyebrow i{ font-size:.75rem; }
.pb-mini .hm-flow-step:last-of-type{ padding-bottom:.6rem; }
.pb-mini .pb-drop{ margin-top:.75rem; background:var(--paper); }
/* "Copy the instructions" inside the card: a quiet link while the clipboard
   already has it, the real button when it doesn't. */
.pb-mini-recopy{
  display:inline-flex; align-items:center; gap:.35rem; margin-top:.6rem;
  border:0; background:none; cursor:pointer; padding:.2rem 0;
  font:500 .76rem 'Inter',system-ui,sans-serif; color:var(--slate);
}
.pb-mini-recopy:hover{ color:var(--accent-deep); }
.pb-mini-recopy[hidden]{ display:none; }
.pb-mini-recopy.is-needed{
  margin-top:.75rem; padding:.6rem 1rem; border-radius:100px;
  background:var(--accent); color:#fff; font:600 .84rem 'Inter',system-ui,sans-serif;
}
.pb-mini-recopy.is-needed:hover{ color:#fff; background:var(--accent-deep); }
.pb-mini .pb-apply-card{ padding:0; border:0; box-shadow:none; background:none; }
.pb-mini-apply{ margin-top:.75rem; }
.pb-mini-apply[hidden]{ display:none; }
/* Two quiet links on one line where the homepage has one. */
.pb-mini-links{ display:flex; align-items:center; justify-content:center; gap:.5rem; margin-top:.9rem; }
.pb-mini-links .hm-modal-quiet{ display:inline; width:auto; margin:0; }
.pb-mini-links-dot{ color:#C3BFD6; font-size:.8rem; }
@media(max-width:480px){
  .pb-mini h2{ font-size:1.25rem; }
}
@media(prefers-reduced-motion:reduce){ .pb-mini{ animation:none; } }

/* =========================================================
   STEP RAIL
   ========================================================= */
.pb-step{ position:relative; padding-left:3rem; padding-bottom:2.2rem; }

/* ---- the copy step, before the first press ----
   The button and nothing else. The card that opens on Copy has the AI pills
   and the paste tray and is where the reply comes back in; the pills and
   the tray only appear on the page once that card has been seen — as the
   place to come back to, not as three more things to read past on the way
   to the button. The tray is a borrowed node: inside the card it is not a
   descendant of the step, so this cannot hide it there. */
.pb-step.is-fresh .pb-ais,
.pb-step.is-fresh .pb-divider,
.pb-step.is-fresh .pb-drop{ display:none; }
.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 ONE BOX.
   ---------------------------------------------------------------------------
   The brief IS the flow — everything downstream is written from it, so it
   carries the strongest visual weight on the page. It used to be a bordered
   textarea inside a bordered, tinted card: a box in a box, which read as a
   form field sitting in a frame. Now the card is the only edge there is.
   The textarea inside it has no border and no background of its own; the
   kind chip (apps, .pb-brief-top), the words and the meter under them
   (briefmeter.js) share the card, so the description reads as one thing to
   fill in. The card takes the focus ring, and a tap on its padding puts the
   cursor in the words (home.js / start.js). */
.pb-brief-wrap{
  position:relative; cursor:text;
  border-radius:18px; padding:.85rem 1.05rem .8rem;
  background:var(--white);
  border:1.5px solid #D9D5F2;
  box-shadow:0 1px 2px rgba(21,24,35,.04), 0 16px 36px -24px rgba(91,75,232,.45);
  transition:border-color .15s, box-shadow .15s;
}
.pb-brief-wrap:hover{ border-color:#C6C0EC; }
.pb-brief-wrap:focus-within{
  border-color:var(--accent);
  box-shadow:0 1px 2px rgba(21,24,35,.04), 0 0 0 4px rgba(91,75,232,.13), 0 18px 40px -22px rgba(91,75,232,.5);
}

/* Three versions of "draw the eye to the empty box" lived here in turn — an
   expanding ring, then a travelling rainbow border, then a quiet colour
   breathe. All three gestured at "type here" without saying what to type.
   The current version isn't CSS at all: home.js/start.js/prompt.js each run
   a small typewriter (see startTyping/refreshBriefPlaceholder) that types a
   real example straight into the textarea's own placeholder and erases it
   again, cycling through a few, off under prefers-reduced-motion. */

/* The editor's builder puts a label in the card's top row. */
.pb-brief-label{
  display:flex; align-items:center; gap:.4rem; margin-bottom:.35rem;
  font:700 .76rem 'Inter',system-ui,sans-serif; color:var(--accent-deep);
}
.pb-brief-label i{ color:var(--accent); font-size:.85rem; }

.pb-brief{
  display:block; width:100%; min-height:6.4rem; resize:none; overflow-y:hidden;
  border:0; border-radius:0; background:transparent;
  padding:.15rem 0 .1rem; margin:0;
  font:400 1.05rem/1.6 'Inter',system-ui,sans-serif; color:var(--ink);
  box-shadow:none; cursor:text;
}
.pb-brief::placeholder{ color:#9EA3AF; }
.pb-brief:focus{ outline:none; border:0; box-shadow:none; }


/* THE METER UNDER THE BOX (briefmeter.js). Fills as they write; the line
   beside it always asks for more, never says "enough". Faint while empty,
   so a blank box isn't a bar at zero. */
.pb-meter{
  display:flex; align-items:center; gap:.7rem; margin-top:.6rem; min-height:1.2rem;
  font:500 .78rem/1.35 'Inter',system-ui,sans-serif; color:var(--slate);
  transition:opacity .2s;
}
.pb-meter[hidden]{ display:none; }
.pb-meter{ animation:pbMeterIn .28s ease-out; }
@keyframes pbMeterIn{ from{ opacity:0; transform:translateY(-3px); } to{ opacity:1; transform:none; } }
.pb-meter-bar{
  flex:0 0 96px; height:6px; border-radius:100px; overflow:hidden;
  background:rgba(91,75,232,.12);
}
.pb-meter-bar i{
  display:block; height:100%; width:0; border-radius:100px;
  background:linear-gradient(90deg, var(--accent), #8B7CF0);
  transition:width .35s cubic-bezier(.2,.8,.2,1), background .3s;
}
.pb-meter.is-top .pb-meter-bar i{ background:linear-gradient(90deg,#3FB47E,#1E9E5A); }
.pb-meter.is-top{ color:#1F6B47; }
.pb-meter-t{ min-width:0; }
.pb-meter-t i{ color:#1E9E5A; margin-right:.15rem; }
.pb-meter-t.is-up{ animation:pbMeterUp .32s ease-out; }
@keyframes pbMeterUp{ 0%{ transform:translateY(4px); opacity:0; } 100%{ transform:none; opacity:1; } }
@media (prefers-reduced-motion:reduce){ .pb-meter-t.is-up{ animation:none; } .pb-meter-bar i{ transition:none; } }
@media (max-width:560px){ .pb-meter-bar{ flex-basis:64px; } .pb-meter{ font-size:.74rem; } }

/* ON A PHONE the card is the width of the screen and a little taller than
   it needs to be for four lines, because this is where the writing happens
   and a cramped box says "one line will do". 16px type, so iOS does not
   zoom the page when the box is tapped. It grows with the words from there
   (autogrow in home.js / start.js). */
@media(max-width:560px){
  .pb-brief-wrap{ padding:.75rem .85rem .65rem; border-radius:16px; }
  .pb-brief{ min-height:7rem; font-size:1rem; line-height:1.55; }
}

/* =========================================================
   EXAMPLES — the card strip on "Add to this page"
   ---------------------------------------------------------
   A scroll-snap row, not a carousel library. Touch, momentum,
   trackpad and keyboard scrolling all come from the browser;
   the arrows are a mouse convenience layered on top, and the
   row works perfectly if their JS never runs.

   It is a STRIP and not a grid on purpose. These are examples
   of what you can ask for, not a menu of what is available —
   the box underneath takes anything — so they get one row of
   the step's height rather than three, and stay subordinate
   to the thing that actually matters.

   Card width is set so the fourth card is cut in half at the
   default overlay width. That half card is the "there's more
   this way" signal.
   ========================================================= */
.pb-qa{ position:relative; margin:0 0 .85rem; }

.pb-qa-row{
  display:flex; gap:.5rem; overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x proximity; scroll-padding-left:2px;
  padding:.25rem 2px .5rem;
  scrollbar-width:none;                       /* the fades and arrows say it scrolls */
}
.pb-qa-row::-webkit-scrollbar{ display:none; }

/* Edge fades. Pointer-events off so they never eat a tap on the card under
   them, and each one lifts as you reach that end of the row. */
.pb-qa::before, .pb-qa::after{
  content:""; position:absolute; top:0; bottom:0; width:46px; z-index:2;
  pointer-events:none; opacity:1; transition:opacity .18s;
}
.pb-qa::before{ left:0;  background:linear-gradient(90deg,var(--paper) 12%,rgba(251,250,247,0)); }
.pb-qa::after{ right:0; background:linear-gradient(270deg,var(--paper) 12%,rgba(251,250,247,0)); }
.pb-qa.at-start::before, .pb-qa.at-end::after,
.pb-qa.no-scroll::before, .pb-qa.no-scroll::after{ opacity:0; }

.pb-qa-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:30px; height:30px; border-radius:50%; cursor:pointer;
  border:1px solid var(--line); background:var(--white); color:var(--ink);
  display:grid; place-items:center; font-size:.8rem;
  box-shadow:var(--shadow-md); transition:opacity .18s, background .15s, color .15s;
}
.pb-qa-nav:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }
.pb-qa-nav.prev{ left:-6px; }
.pb-qa-nav.next{ right:-6px; }
.pb-qa.at-start .pb-qa-nav.prev,
.pb-qa.at-end .pb-qa-nav.next,
.pb-qa.no-scroll .pb-qa-nav{ opacity:0; pointer-events:none; }

.pb-qa-card{
  position:relative; flex:0 0 132px; scroll-snap-align:start;
  display:flex; flex-direction:column; align-items:flex-start; gap:.05rem;
  padding:.55rem .6rem .62rem; cursor:pointer; text-align:left;
  border:1.5px solid var(--line); border-radius:15px; background:var(--white);
  box-shadow:0 1px 2px rgba(21,24,35,.04);
  transition:border-color .16s, box-shadow .16s, transform .16s, background .16s;

  /* Every card's artwork is drawn from these three, so one card can shift its
     whole palette (the hero, or the chosen one) without touching the SVGs. */
  --qa-a:var(--accent);
  --qa-b:#E4E1D8;
  --qa-w:#FFFFFF;
}
.pb-qa-card:hover{
  border-color:#C9C2F5; transform:translateY(-2px);
  box-shadow:0 1px 2px rgba(21,24,35,.04), 0 14px 26px -16px rgba(91,75,232,.55);
}
.pb-qa-card:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.pb-qa-art{
  width:100%; height:42px; margin-bottom:.38rem;
  border-radius:8px; background:var(--paper-2);
  display:grid; place-items:center; overflow:hidden;
  transition:background .16s;
}
.pb-qa-art svg{ width:54px; height:auto; display:block; }
.pb-qa-art .qa-a{ fill:var(--qa-a); }
.pb-qa-art .qa-b{ fill:var(--qa-b); }
.pb-qa-art .qa-w{ fill:var(--qa-w); }
/* The two shapes drawn as lines rather than filled areas — a road across the
   map, a chevron on the open FAQ row. Same colour, opposite paint. */
.pb-qa-art .qa-line{ fill:none; stroke:var(--qa-w); stroke-linejoin:round; }

/* Two lines' worth of room whether the label needs them or not, so every
   card's second line starts at the same height. Without it the one two-line
   title in the row (the photos card) shunts its own subtitle down and the
   whole row looks misaligned. */
.pb-qa-card b{ font:700 .78rem/1.28 'Inter',system-ui,sans-serif; color:var(--ink); min-height:2rem; }
/* Two lines, then an ellipsis. Every card in a strip is as tall as the tallest
   one in it, so an unclamped third line on a single card stretches all nine. */
.pb-qa-sub{
  font:400 .69rem/1.32 'Inter',system-ui,sans-serif; color:var(--slate); margin-top:.14rem;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}

/* The photos card. It is the answer to the most-asked question in the product,
   so it does not sit in the row looking like the other eight. */
.pb-qa-card.hero{
  background:linear-gradient(180deg,var(--lilac),var(--white) 62%);
  border-color:#D6D0F7;
  --qa-b:#CFC8F0;
}
.pb-qa-card.hero .pb-qa-art{ background:rgba(255,255,255,.72); }

.pb-qa-card.on{
  border-color:var(--accent); background:var(--white);
  box-shadow:0 0 0 3px rgba(91,75,232,.14);
}
.pb-qa-card.on .pb-qa-art{ background:var(--lilac); }

.pb-qa-tick{
  position:absolute; top:-7px; right:-7px; width:22px; height:22px; border-radius:50%;
  background:var(--accent); color:#fff; display:grid; place-items:center;
  font-size:.7rem; border:2px solid var(--white);
  opacity:0; transform:scale(.4); transition:opacity .16s, transform .18s cubic-bezier(.2,1.4,.4,1);
}
.pb-qa-card.on .pb-qa-tick{ opacity:1; transform:scale(1); }

/* The nudge under the box. Addressed to the person, never sent to the AI —
   "change the address to your own" is advice, not an instruction to follow. */
.pb-brief-hint{
  display:flex; align-items:flex-start; gap:.4rem; margin-top:.55rem;
  font:400 .78rem/1.45 'Inter',system-ui,sans-serif; color:var(--slate);
}
.pb-brief-hint i{ color:var(--accent); font-size:.8rem; line-height:inherit; flex:none; }

/* The technical half of a Quick Add, folded away. Styled quietly on purpose:
   it is reassurance that something else is being sent, not a thing to read. */

/* The brief, a beat after a card wrote it. Long enough to notice, short
   enough that it's finished before the scroll to Copy starts. */
@keyframes pbFlash{
  0%   { border-color:var(--accent); box-shadow:0 0 0 6px rgba(91,75,232,.22); }
  100% { border-color:var(--line);   box-shadow:0 0 0 0 rgba(91,75,232,0); }
}
.pb-brief.pb-flash{ animation:pbFlash .9s ease-out; }
@media (prefers-reduced-motion:reduce){
  .pb-brief.pb-flash{ animation:none; }
  .pb-qa-card:hover{ transform:none; }
}

@media (max-width:640px){
  /* Arrows are a mouse affordance; a thumb already swipes. Dropping them
     gives the cards the full width back. */
  .pb-qa-nav{ display:none; }
  .pb-qa-card{ flex-basis:124px; }
  .pb-qa::before, .pb-qa::after{ width:26px; }
}

/* ONE ROW, INCLUDING THE LABEL.
   This was a heading on its own line above a wrapping grid of chips, and with
   the Change-mode examples (whole sentences, before they were given short
   labels) it ran to four or five lines under every writing box and pushed
   everything after it off the screen. Label and chips now share a baseline and
   the whole thing is a strip you can ignore in one glance. */
.pb-egs{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:.32rem .45rem;
  margin-top:.6rem;
}
.pb-egs-l{ flex:none; font-size:.74rem; font-weight:600; color:var(--slate); }
.pb-egs-row{ display:flex; flex-wrap:wrap; gap:.32rem; flex:1 1 auto; min-width:0; }
.pb-eg{
  text-align:left; max-width:100%;
  font:500 .755rem/1.25 'Inter',system-ui,sans-serif; color:var(--ink-soft);
  background:var(--white); border:1px dashed #D6D3EA; border-radius:100px;
  padding:.3rem .62rem; 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-eg:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
/* ON A PHONE THE CHIPS ARE ONE ROW YOU SWIPE. Fourteen games wrapped into
   seven rows and pushed the next step off the screen; one row that scrolls
   sideways, with the last chip half cut off as the hint, keeps the step
   short and still offers every one. The label stays above the row. */
@media(max-width:560px){
  .pb-egs{ margin-top:.7rem; gap:.35rem .45rem; }
  .pb-egs-l{ flex:1 1 100%; }
  .pb-egs-row{
    flex:1 1 100%; flex-wrap:nowrap; gap:.4rem; overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x proximity; scrollbar-width:none; padding:.1rem 0 .35rem;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
            mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
  }
  .pb-egs-row::-webkit-scrollbar{ display:none; }
  .pb-eg{ flex:none; white-space:nowrap; scroll-snap-align:start; padding:.46rem .78rem; font-size:.8rem; }
}

/* WHAT THE AI COULDN'T BUILD, SAID ONCE, WHERE IT LANDS.
   Only drawn when the reply carried a siteseconds:note comment — i.e. only for the
   person whose brief asked for a login, a checkout or a shared database. It is
   information, not a failure: the page still works, it just does something
   slightly different from what was asked, and this is the sentence that stops
   that being a nasty surprise three days after publishing. */
.pb-receipt-note{
  display:flex; align-items:flex-start; gap:.55rem;
  margin-top:.7rem; padding:.65rem .8rem; border-radius:12px;
  background:#FFF8EC; border:1px solid #F2DFBB;
}
.pb-receipt-note i{ color:#B7791F; font-size:.92rem; line-height:1.45; flex:none; }
.pb-receipt-note b{ display:block; font:600 .82rem 'Inter',system-ui,sans-serif; color:#8A5A0B; }
.pb-receipt-note span{
  display:block; margin-top:.12rem;
  font:400 .8rem/1.45 'Inter',system-ui,sans-serif; color:#7A5A22;
}

.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; }

/* =========================================================
   PICK A LOOK - the theme bar, the colour row, the palette
   ---------------------------------------------------------
   Everything here is sized to keep the whole step under about 90px until
   somebody asks for more. Markup: static/js/lookstep.js, which the
   homepage, /start and the editor's AI Builder all share.
   ========================================================= */

/* FIVE PILLS, ONE ROW, 34px TALL.
   ---------------------------------------------------------------------------
   This was a sunken tray of five segments, each with a 46x26 rectangle
   pretending to be a miniature web page. At that size a miniature page is a
   grey dash and a coloured tab: a smudge, not a style. And a tray of
   segments is a SETTING, which is the wrong grammar - how the site will look
   is something you pick, not something you flip.

   So: pills on the page's own background, each with one round chip. */
.pb-themes{ display:flex; flex-wrap:wrap; gap:.4rem; }
.pb-theme{
  display:inline-flex; align-items:center; gap:.45rem;
  height:34px; padding:0 .8rem 0 .48rem; cursor:pointer;
  background:var(--white); border:1px solid var(--line); border-radius:100px;
  transition:border-color .15s, box-shadow .15s, transform .15s, background .15s;
}
/* THE WHOLE STYLE IN ONE CIRCLE: the look's own paper, ringed in its own
   rule colour, with a dot of the CURRENT accent at the centre - so changing
   the colour below repaints all five and the two halves of this step
   visibly belong to each other. A circle still reads at 18px; a page does
   not, which is what the old rectangle kept getting wrong. */
.pb-theme-sw{
  width:18px; height:18px; flex:none;
  /* THE CHIP TAKES THE LOOK'S OWN CORNER RADIUS, capped at a circle and
     floored just above a hard square. Three of these looks share a near-white
     paper, so the paper alone cannot tell them apart - but Elegant is 2px and
     Minimal is 8px and Cute is 18px, and a square next to a squircle next to
     a circle is legible at a glance. It is also the truest thing the chip
     could show: the radius is literally what the AI is told. */
  border-radius:max(3px, min(var(--t-r), 9px));
  background:var(--t-bg); border:1px solid var(--t-line);
  display:grid; place-items:center;
  box-shadow:inset 0 1px 2px rgba(21,24,35,.06);
}
.pb-theme-sw i{
  width:8px; height:8px; background:var(--t-acc);
  border-radius:max(1px, min(var(--t-r), 4px));
}
/* "AI picks" has no paper of its own to show, so it shows the spark on the
   product's gradient instead. */
.pb-theme-sw:has(em){
  background:linear-gradient(135deg,#5B4BE8,#9333EA 55%,#0EA5A4);
  border-color:transparent; border-radius:50%; box-shadow:none;
}
.pb-theme-sw em{ font-style:normal; font-size:.62rem; line-height:1; color:#fff; }
.pb-theme-t{
  font:600 .79rem/1 'Inter',system-ui,sans-serif; color:var(--ink-soft);
  white-space:nowrap;
}
.pb-theme:hover{ border-color:#C9C2EC; transform:translateY(-1px); box-shadow:var(--shadow-sm); }
.pb-theme.active{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(91,75,232,.12);
}
.pb-theme.active .pb-theme-t{ color:var(--accent-deep); }

/* The sentence that used to be printed on all five cards at once, now
   describing only the one that is selected. min-height so the rest of the
   step does not jump a line when a longer description replaces a short one. */
.pb-theme-note{
  margin:.55rem .15rem .85rem; min-height:1.15rem;
  font:400 .78rem/1.45 'Inter',system-ui,sans-serif; color:var(--slate);
}

.pb-colour{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .55rem; }
.pb-colour .pb-label{ width:100%; margin-bottom:.1rem; }
.pb-sw{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; }
.pb-sw button{
  width:26px; height:26px; border-radius:8px; 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:.35rem;
  border:1px solid var(--line); border-radius:100px; padding:.32rem .62rem;
  background:var(--white); cursor:pointer;
  font:600 .76rem '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; }

/* THE PALETTE. Not rendered at all while the colour is "Match idea", so the
   default path never grows this row - it appears the moment somebody opts
   into colour, which is the only moment it is wanted. */
.pb-pal{
  display:flex; flex-wrap:wrap; align-items:center; gap:.45rem .6rem;
  margin-top:.7rem;
}
.pb-pal-strip{
  display:flex; flex:1 1 280px; min-width:0;
  border-radius:12px; overflow:hidden; border:1px solid rgba(21,24,35,.1);
}
/* Every bar is a button: tapping one promotes it to Main and the other four
   regenerate around it. That is what makes this steerable rather than five
   squares to look at. */
.pb-pal-c{
  flex:1 1 0; min-width:0; height:54px; padding:0 .2rem; border:0; cursor:pointer;
  background:var(--c); color:var(--on);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.14rem;
  transition:flex-grow .22s ease;
}
.pb-pal-c.is-base{ flex-grow:1.3; }
.pb-pal-c:hover{ flex-grow:1.45; }
.pb-pal-role{ font:600 .62rem/1 'Inter',system-ui,sans-serif; opacity:.9; display:inline-flex; align-items:center; gap:.28rem; }
/* A dot on any bar carrying a hand edit (lookstep.js openPaletteEditor) — the
   strip is the one place that shows the effect of the modal once it's
   closed, so a silent edit nobody can see afterwards would feel like it
   didn't take. */
.pb-pal-c.is-edited .pb-pal-role::after{
  content:""; width:5px; height:5px; border-radius:50%;
  background:currentColor; opacity:.85;
}
.pb-pal-hex{ font:400 .58rem/1 'Space Mono',ui-monospace,monospace; opacity:.62; letter-spacing:-.02em; }
.pb-pal-actions{ display:flex; align-items:center; gap:.4rem; }
.pb-pal-next, .pb-pal-edit{
  display:inline-flex; align-items:center; gap:.38rem; padding:.48rem .85rem;
  border:1px solid var(--line); border-radius:100px; background:var(--white);
  cursor:pointer; font:600 .78rem 'Inter',system-ui,sans-serif; color:var(--ink-soft);
  transition:border-color .15s, color .15s;
}
.pb-pal-next i, .pb-pal-edit i{ font-size:.85rem; }
.pb-pal-next i{ transition:transform .3s ease; }
.pb-pal-next:hover, .pb-pal-edit:hover{ border-color:var(--accent); color:var(--accent-deep); }
.pb-pal-next:hover i{ transform:rotate(180deg); }
.pb-pal-hint{ font:400 .72rem 'Inter',system-ui,sans-serif; color:var(--slate); opacity:.8; }

/* =========================================================================
   THE PALETTE EDITOR — a small modal off the Edit button above, for nudging
   one derived colour without the Next button regenerating the other four.
   Parented on <body> (see openPaletteEditor), so it sits above everything
   regardless of which of the three pages opened it.
   ========================================================================= */
.pb-pal-modal-backdrop{
  position:fixed; inset:0; z-index:2000;
  background:rgba(20,18,45,.45); backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center; padding:1rem;
  animation:pbPalFade .15s ease;
}
@keyframes pbPalFade{ from{ opacity:0; } to{ opacity:1; } }
.pb-pal-modal{
  width:100%; max-width:392px; max-height:min(600px, 88vh); overflow:auto;
  background:var(--white); border-radius:20px;
  box-shadow:0 24px 60px -20px rgba(20,18,45,.5);
  padding:1.25rem 1.25rem 1.1rem;
  animation:pbPalPop .18s cubic-bezier(.2,.8,.25,1);
}
@keyframes pbPalPop{ from{ opacity:0; transform:translateY(10px) scale(.98); } to{ opacity:1; transform:none; } }
.pb-pal-modal-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:.7rem; }
.pb-pal-modal-title{ margin:0; font:700 1.02rem/1.3 'Inter',system-ui,sans-serif; color:var(--ink); }
.pb-pal-modal-sub{ margin:.22rem 0 0; font:400 .8rem/1.4 'Inter',system-ui,sans-serif; color:var(--slate); }
.pb-pal-modal-close{
  flex:none; width:30px; height:30px; border-radius:50%;
  border:1px solid var(--line); background:var(--white); color:var(--slate);
  display:grid; place-items:center; cursor:pointer; font-size:.8rem;
  transition:border-color .15s, color .15s, background .15s;
}
.pb-pal-modal-close:hover{ border-color:var(--accent); color:var(--accent-deep); background:var(--lilac,#F3F0FF); }

.pb-pal-modal-body{ display:flex; flex-direction:column; gap:.5rem; margin:1.05rem 0 .2rem; }
.pb-pal-row{ display:flex; align-items:center; gap:.7rem; padding:.15rem 0; }
.pb-pal-row-sw{
  position:relative; flex:none; width:38px; height:38px; border-radius:11px;
  overflow:hidden; display:grid; place-items:center; font-size:.85rem;
  box-shadow:inset 0 0 0 1px rgba(21,24,35,.14);
}
.pb-pal-row-sw input[type="color"]{
  position:absolute; inset:-6px; width:calc(100% + 12px); height:calc(100% + 12px);
  border:0; padding:0; cursor:pointer; opacity:0;
}
.pb-pal-row.is-fixed .pb-pal-row-sw{ opacity:.55; }
.pb-pal-row-t{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:.06rem; }
.pb-pal-row-role{ font:600 .82rem/1.25 'Inter',system-ui,sans-serif; color:var(--ink); }
.pb-pal-row-note{
  font:400 .7rem/1.3 'Inter',system-ui,sans-serif; color:var(--slate);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pb-pal-row-hex{
  flex:none; width:84px; text-align:center; padding:.42rem .3rem;
  border:1px solid var(--line); border-radius:9px; background:var(--paper-2,#F4F3FA);
  font:600 .76rem/1 'Space Mono',ui-monospace,monospace; color:var(--ink-soft);
  text-transform:uppercase; letter-spacing:.02em;
  transition:border-color .15s, background .15s;
}
input.pb-pal-row-hex:focus{ outline:none; border-color:var(--accent); background:var(--white); }
.pb-pal-row-hex.is-static{ border-color:transparent; background:none; color:var(--slate); opacity:.85; }

.pb-pal-modal-foot{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  margin-top:.9rem; padding-top:.85rem; border-top:1px solid var(--line);
}
.pb-pal-reset{
  border:0; background:none; padding:.4rem .2rem; cursor:pointer;
  font:600 .78rem 'Inter',system-ui,sans-serif; color:var(--slate);
  transition:color .15s;
}
.pb-pal-reset:hover{ color:var(--accent-deep); }
.pb-pal-reset:disabled{ opacity:.4; cursor:default; }
.pb-pal-done{
  padding:.55rem 1.15rem; border:0; border-radius:100px; background:var(--accent);
  color:#fff; font:600 .84rem 'Inter',system-ui,sans-serif; cursor:pointer;
  transition:background .15s, transform .15s;
}
.pb-pal-done:hover{ background:var(--accent-deep); transform:translateY(-1px); }

/* Bottom sheet on a phone: closer to the thumb than a floating card, and the
   habit every native picker on the platform already taught them. */
@media(max-width:560px){
  .pb-pal-modal-backdrop{ align-items:flex-end; padding:0; }
  .pb-pal-modal{
    max-width:none; width:100%; max-height:85vh;
    border-radius:20px 20px 0 0;
    padding:.6rem 1.1rem calc(1.1rem + env(safe-area-inset-bottom));
    animation:pbPalSheet .22s cubic-bezier(.2,.8,.25,1);
  }
  .pb-pal-modal::before{
    content:""; display:block; width:36px; height:4px; margin:.35rem auto .85rem;
    border-radius:100px; background:var(--line);
  }
  @keyframes pbPalSheet{ from{ transform:translateY(100%); } to{ transform:translateY(0); } }
}

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


/* The wrapper around a toggle that follows other controls. It used to live in
   the chat step and was deleted with it, which left "Send it my site's
   existing styling" sitting flush against the colour picker above with no
   separation at all. Back, with a real rule above it and more room than
   before, because it is now the last thing in the style step rather than one
   row among several. */
.pb-ctx-block{
  margin-top:1.15rem; padding-top:1.05rem;
  border-top:1px solid var(--line);
}
.pb-ctx-block + .pb-ctx-block{ margin-top:.7rem; padding-top:.9rem; }

.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; }
/* THE PHOTO PICKER.
   Each photo is a small card: the toggle chip, and -- once it is ticked --
   one line of "where should this go?" beside it. A chip is a <button> and a
   <button> cannot contain a text field, hence the wrapper.
   The row is a grid rather than wrapping flex so the cards keep a column
   when notes open and the tallest one does not drag the rest out of line. */
.pb-chip-row{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:.5rem; max-height:320px; overflow-y:auto; padding:.35rem .1rem;
}
.pb-pick{
  display:flex; flex-direction:column; gap:.3rem; min-width:0;
  border-radius:14px; transition:background .15s;
}
.pb-pick.on{ background:#F7F6FE; padding:.3rem; }
.pb-pick .pb-chip{ max-width:none; width:100%; }
/* The note: quiet until it has something in it, so a row of six empty boxes
   does not read as six things you have to fill in. */
.pb-pick-note{
  display:flex; align-items:center; gap:.4rem; padding:0 .15rem .1rem .3rem;
  animation:pbNoteIn .18s ease-out;
}
@keyframes pbNoteIn{ from{ opacity:0; transform:translateY(-3px); } }
@media(prefers-reduced-motion:reduce){ .pb-pick-note{ animation:none; } }
.pb-pick-note-ico{ flex:none; color:#B0ABC8; font-size:.72rem; line-height:1; }
.pb-pick-note input{
  flex:1; min-width:0; border:0; border-bottom:1px dashed #D5D1E8; background:none;
  padding:.22rem .1rem; font:400 .78rem/1.3 'Inter',system-ui,sans-serif; color:var(--ink);
}
.pb-pick-note input::placeholder{ color:#B0ABC8; }
.pb-pick-note input:focus{ outline:none; border-bottom-color:var(--accent); }
.pb-pick-note input:focus::placeholder{ color:#CFCBE2; }
.pb-pick-note:focus-within .pb-pick-note-ico{ color:var(--accent); }
@media(max-width:560px){
  .pb-chip-row{ grid-template-columns:1fr; max-height:260px; }
}
/* A rounded RECTANGLE, not a pill. The chip used to be a pill with a small
   round avatar in it, which worked; a square photo thumbnail in a pill does
   not. At 50px tall the pill's corner radius is 25px, and a 38px square inset
   6px from the left pokes about 3px outside that curve at both left corners.
   14px outer minus the 4.8px padding gives the 9px inner radius below, which
   is the concentric-radius rule and the reason the corners now sit parallel. */
.pb-chip{
  position:relative; display:flex; align-items:center; gap:.5rem; text-align:left;
  border:1.5px solid var(--line); background:var(--white); border-radius:14px;
  padding:.3rem .7rem .3rem .3rem; cursor:pointer; max-width:250px; min-width:0;
  transition:border-color .15s, box-shadow .15s, transform .15s;
}
.pb-chip:hover{ border-color:#C9C6E8; transform:translateY(-1px); }
.pb-chip:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.pb-chip.on{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(91,75,232,.12); }

/* You pick a photo by looking at it, not by reading its filename — so the
   picture is the biggest thing in the chip, and it's a rounded square rather
   than a circle because a circle crops the subject out of a portrait. */
.pb-chip-thumb{ position:relative; width:38px; height:38px; flex:none; }
.pb-chip-thumb img{ width:100%; height:100%; border-radius:9px; object-fit:cover; display:block; background:var(--paper-2); }
.pb-chip-thumb i{
  width:100%; height:100%; border-radius:9px; background:var(--paper-2);
  display:grid; place-items:center; color:var(--slate); font-size:.95rem;
}
.pb-chip-tick{
  position:absolute; inset:0; border-radius:9px; display:grid; place-items:center;
  background:rgba(69,54,196,.72); color:#fff; font-size:1rem;
  opacity:0; transform:scale(.7); transition:opacity .16s, transform .2s cubic-bezier(.2,1.5,.4,1);
}
.pb-chip.on .pb-chip-tick{ opacity:1; transform:scale(1); }
/* min-width:0 is what actually makes the ellipsis work. A flex item defaults to
   min-width:auto, i.e. "never shrink below your content", so a filename like
   134191973036304553.jpg pushed itself past the chip's max-width instead of
   being truncated — the second half of the overflow that was reported. */
.pb-chip-name{
  flex:1 1 auto; min-width:0;
  font:600 .78rem 'Inter',system-ui,sans-serif; color:var(--ink-soft);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pb-chip.on .pb-chip-name{ color:var(--accent-deep); }
.pb-chip-meta{ flex:none; font:500 .64rem 'Space Mono',monospace; color:var(--slate); white-space:nowrap; }

/* =========================================================
   "TAP A PHOTO" — the one moment this flow is allowed to shout
   ---------------------------------------------------------
   Only ever on while a photo swap has nothing picked. Grey
   helper text was not getting anybody to tap, and the step
   after it produces instructions with no photos in them, so
   this is a dead end reached in silence. Everything here
   stops the instant one photo is tapped.
   ========================================================= */
.pb-chip-cta{
  display:flex; align-items:center; gap:.7rem; margin-bottom:.7rem;
  padding:.7rem .85rem; border-radius:12px;
  background:linear-gradient(100deg, var(--lilac), rgba(238,235,252,.35));
  border:1.5px solid #D6D0F7;
}
.pb-chip-cta-hand{
  width:32px; height:32px; flex:none; border-radius:50%;
  display:grid; place-items:center; font-size:1rem;
  background:var(--accent); color:#fff;
  animation:pbHandBob 1.5s ease-in-out infinite;
}
.pb-chip-cta-t{ display:flex; flex-direction:column; min-width:0; }
.pb-chip-cta-t b{ font:700 .85rem 'Inter',system-ui,sans-serif; color:var(--accent-deep); }
.pb-chip-cta-t>span{ font:400 .77rem/1.4 'Inter',system-ui,sans-serif; color:var(--slate); margin-top:.1rem; }
@keyframes pbHandBob{ 0%,100%{ transform:translateY(-2px); } 50%{ transform:translateY(3px); } }

/* A wave, not a strobe: each photo is delayed a fraction behind the one before
   it, so the row ripples once every couple of seconds and then sits still.
   Nine photos flashing in unison reads as an error state. */
@keyframes pbChipNudge{
  0%   { transform:none;             box-shadow:0 0 0 0   rgba(91,75,232,0); }
  5%   { transform:translateY(-5px); box-shadow:0 0 0 7px rgba(91,75,232,.18); }
  13%  { transform:none;             box-shadow:0 0 0 0   rgba(91,75,232,0); }
  100% { transform:none;             box-shadow:0 0 0 0   rgba(91,75,232,0); }
}
.pb-chip-row.nudge .pb-chip{
  border-color:#C9C2F5;
  animation:pbChipNudge 2.6s ease-in-out infinite;
  animation-delay:calc(var(--i, 0) * .1s);
}
.pb-chip-row.nudge .pb-chip:hover{ animation-play-state:paused; }

.pb-mini-lit{ border-color:var(--accent); color:var(--accent); background:var(--white); }

/* The card the picker sits in, and the step number beside it — so the ask is
   visible before you have scrolled the photos into view. */
@keyframes pbPhotosGlow{
  0%,100%{ box-shadow:0 0 0 0   rgba(91,75,232,0);   border-color:#C9C4EE; }
  50%    { box-shadow:0 0 0 5px rgba(91,75,232,.11); border-color:var(--accent); }
}
.pb-photos.needs{ animation:pbPhotosGlow 2.6s ease-in-out infinite; }
@keyframes pbStepNPulse{
  0%,100%{ box-shadow:0 0 0 0   rgba(91,75,232,0); }
  50%    { box-shadow:0 0 0 6px rgba(91,75,232,.16); }
}
.pb-step-urgent .pb-n{
  border-color:var(--accent); color:#fff; background:var(--accent);
  animation:pbStepNPulse 2.2s ease-in-out infinite;
}

/* Reduced motion keeps every bit of the EMPHASIS and drops every bit of the
   MOVEMENT — the accent border and the filled step number still say "this one",
   they just say it without waving. */
@media (prefers-reduced-motion:reduce){
  .pb-chip-cta-hand,
  .pb-chip-row.nudge .pb-chip,
  .pb-photos.needs,
  .pb-step-urgent .pb-n{ animation:none; }
  .pb-photos.needs{ border-color:var(--accent); box-shadow:0 0 0 4px rgba(91,75,232,.10); }
  .pb-chip:hover{ transform:none; }
}
.pb-asset-empty{ font:400 .82rem/1.5 'Inter',system-ui,sans-serif; color:var(--slate); }
.pb-asset-empty b{ color:var(--ink); }

/* =========================================================
   COPY + AI LINKS
   No raw prompt preview any more — showing the actual instructions text was
   a wall of markdown nobody asked for. One button carries the whole step.
   ========================================================= */
.pb-copy{ width:100%; max-width:330px; justify-content:center; }
.pb-copy.done{ background:var(--ok) !important; }

/* Bigger than a normal button and, until it's been pressed once, breathing
   gently so it reads as THE thing to do on this step. Shared by the
   homepage, /start and the editor's builder — one definition, one feel. */
.pb-copy-big{
  max-width:none; width:100%; padding:1.05rem 1.5rem; font-size:1.02rem;
  border-radius:14px; gap:.6rem;
}
.pb-copy-big.pulse{ animation:pbCopyPulse 2.4s ease-in-out infinite; }
@keyframes pbCopyPulse{
  0%,100%{ box-shadow:0 8px 20px -6px rgba(91,75,232,.55), 0 0 0 0 rgba(91,75,232,.35); }
  50%{ box-shadow:0 8px 20px -6px rgba(91,75,232,.55), 0 0 0 10px rgba(91,75,232,0); }
}
@media(prefers-reduced-motion:reduce){ .pb-copy-big.pulse{ animation:none; } }

/* A quiet seam between "go do this elsewhere" and "come back and drop it
   here" — reused wherever the copy step and the paste tray sit in the same
   breath rather than behind a second popup. */
.pb-divider{ display:flex; align-items:center; gap:.7rem; margin:1.3rem 0 .9rem; }
.pb-divider::before,.pb-divider::after{ content:""; flex:1; height:1px; background:var(--line); }
.pb-divider span{
  flex:none; font:700 .68rem 'Space Mono',monospace; letter-spacing:.08em; text-transform:uppercase;
  color:var(--slate); white-space:nowrap;
}

/* =========================================================
   THE COPY-GUIDE POPUP
   Shared chrome for the small modal home.js and start.js open on every copy
   (see showCopyGuide in each) — one definition instead of two copies quietly
   drifting apart. The publish-success modal's OWN pieces (.hm-claim, .hm-url,
   .hm-modal-acts, …) stay local to home.css; nothing here reaches into those.
   ========================================================= */
.hm-overlay{
  position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  padding:1.25rem; background:rgba(21,24,35,.58);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); overflow-y:auto;
  opacity:1; transition:opacity .2s cubic-bezier(.4,0,1,1);
}
/* Set right before [hidden] lands, so a self-triggered close (paste success)
   reads as an intentional fade rather than a hard cut — the X/backdrop/Escape
   paths stay instant, which is what a person who asked to close expects.
   .2s, and ease-IN so it accelerates away: this fires at the best moment in
   the whole flow, and anything slower is just time spent watching a box
   leave. Matches CLOSE_MS in home.js / start.js / prompt.js. */
.hm-overlay.hm-closing{ opacity:0; }
.hm-overlay.hm-closing .hm-modal{ transform:scale(.97); transition:transform .2s cubic-bezier(.4,0,1,1); }
@media(prefers-reduced-motion:reduce){ .hm-overlay{ transition:none; } .hm-overlay.hm-closing .hm-modal{ transition:none; } }
.hm-modal{
  position:relative; width:100%; max-width:430px; background:var(--white); border-radius:22px;
  box-shadow:var(--shadow-lg); padding:1.6rem 1.5rem 1.4rem; text-align:left;
  /* The card caps itself and scrolls its OWN content — .hm-overlay's own
     overflow-y:auto was doing this by scrolling the whole page instead, which
     on anything shorter than the card (a real laptop window, not just a phone)
     meant the top and bottom could never both be on screen at once, with no
     visible affordance telling you to scroll. Missing on every page that
     shares this file (home, start, the editor's copy-guide) until now — the
     editor's builder just happens to run in the shortest viewport of the
     three, which is why it was the one that got noticed. */
  max-height:calc(100vh - 2.5rem); overflow-y:auto;
  /* When it does have to scroll, a hairline, not a grey gutter down the
     side of the card. */
  scrollbar-width:thin; scrollbar-color:#D9D6EA transparent;
  animation:hmPop .22s cubic-bezier(.2,.8,.2,1);
}
.hm-modal::-webkit-scrollbar{ width:6px; }
.hm-modal::-webkit-scrollbar-thumb{ background:#D9D6EA; border-radius:100px; }
.hm-modal::-webkit-scrollbar-track{ background:transparent; }
@keyframes hmPop{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.hm-modal-x{
  position:absolute; top:.9rem; right:.9rem; border:0; background:none; cursor:pointer;
  color:#B7B2C6; font-size:.95rem; padding:.3rem; border-radius:8px; line-height:1; z-index:1;
}
.hm-modal-x:hover{ color:var(--ink); background:var(--paper-2); }
.hm-modal-eyebrow{
  position:relative; display:inline-flex; align-items:center; gap:.42rem;
  font:700 .66rem 'Space Mono',monospace; letter-spacing:.12em; text-transform:uppercase;
  color:#1F6B47; background:#EAF7F0; border-radius:100px; padding:.3rem .6rem;
}
.hm-modal-eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--ok); animation:hmDotPulse 2.4s ease-out infinite; }
@keyframes hmDotPulse{0%{box-shadow:0 0 0 0 rgba(46,158,107,.45)}70%,100%{box-shadow:0 0 0 8px rgba(46,158,107,0)}}
.hm-modal h2{ position:relative; margin-top:.75rem; font-size:1.45rem; font-weight:800; }
.hm-modal>p{ position:relative; margin-top:.35rem; font-size:.88rem; line-height:1.55; color:var(--slate); }

/* The copy-guide modal is the one that has to hold a whole paste tray, so it
   gets more room than the default 430px — a modifier rather than a change to
   .hm-modal itself, so the publish-success modal stays exactly as it was.

   THE BUG THIS REPLACED: this used to be `overflow:hidden` — needed so the
   glow below doesn't bleed square corners past the card's rounded ones — but
   `overflow` is a shorthand for BOTH axes, so it silently overwrote .hm-modal's
   own `overflow-y:auto` right back to hidden the moment a modal was also
   .hm-modal-wide (every copy-guide on every page IS). The result: the card
   still capped its height, but the overflow past that cap had nowhere to go
   and nothing to scroll it with — invisibly clipped, which is what "the
   bottom is cut off, and scrolling doesn't help" actually was. clip-path on
   the glow itself gets the same clipped-to-the-card look without touching
   overflow on the card at all, so .hm-modal's own scroll is free to work. */
.hm-modal-wide{ max-width:500px; }
.hm-modal-wide::before{
  content:""; position:absolute; top:-70px; left:50%; transform:translateX(-50%);
  width:320px; height:180px; pointer-events:none;
  background:radial-gradient(closest-side, rgba(91,75,232,.16), rgba(14,165,164,.07) 70%, transparent);
  /* Clip to the glow's own box, not the card's — the 70px inset is exactly
     this element's own top offset, so what's left visible starts right at
     the card's top edge. round matches .hm-modal's border-radius so a
     square glow corner never pokes past a rounded card corner. */
  clip-path: inset(70px 0 0 0 round 22px);
}
.hm-modal-wide .pb-ai{ padding:.62rem 1.05rem; }

/* The same numbered-circle-and-connecting-line the page's own wizard uses
   for .pb-step/.pb-n, reused here so the popup reads as more of the product
   instead of a dialog bolted onto it. Two steps, not five, so it's a much
   smaller version — but the same idea: a step marks itself done rather than
   just sitting there once it's been acted on. */
.hm-flow-step{ position:relative; display:flex; gap:.85rem; margin-top:1.2rem; padding-bottom:1.2rem; }
.hm-flow-step:not(:last-child)::before{
  content:""; position:absolute; left:15px; top:34px; bottom:0; width:2px;
  border-radius:2px; background:linear-gradient(180deg,var(--line),rgba(230,227,218,.2));
}
.hm-flow-n{
  position:relative; flex:none; width:32px; height:32px; border-radius:50%; z-index:1;
  display:grid; place-items:center;
  font:700 .84rem 'Inter',system-ui,sans-serif; line-height:1;
  color:var(--accent); background:var(--white); border:2px solid #DEDAF8;
}
.hm-flow-n i{ display:none; }
.hm-flow-step.done .hm-flow-n{ background:var(--accent); border-color:var(--accent); }
.hm-flow-step.done .hm-flow-n b{ display:none; }
.hm-flow-step.done .hm-flow-n i{ display:block; color:#fff; font-size:.95rem; }
.hm-flow-b{ flex:1; min-width:0; padding-top:.15rem; }
.hm-flow-b>b{ display:block; font:700 .92rem 'Inter',system-ui,sans-serif; color:var(--ink); }
.hm-flow-b>span{ display:block; margin-top:.15rem; font:400 .8rem/1.45 'Inter',system-ui,sans-serif; color:var(--slate); }
.hm-flow-b .pb-ais-row{ margin-top:.75rem; }

#hmModalDropSlot .pb-drop, #stModalDropSlot .pb-drop, #pbModalDropSlot .pb-drop{ background:var(--paper); position:relative; }
/* Inside a card the tray is a target for one paste, not a place to read
   code: shorter, so the whole card fits a laptop window (720px) without a
   scrollbar. The pasted reply scrolls inside it regardless. */
#hmModalDropSlot .pb-paste-box, #stModalDropSlot .pb-paste-box, #pbModalDropSlot .pb-paste-box, .pb-mini .pb-paste-box{ min-height:110px; }

.hm-modal-quiet{
  position:relative; display:block; width:100%; margin-top:.9rem; background:none; border:0; cursor:pointer;
  font:500 .8rem 'Inter',sans-serif; color:var(--slate); padding:.3rem;
}
.hm-modal-quiet:hover{ color:var(--ink); }
/* ON A PHONE THE CARD IS A SHEET. A floating card the height of the screen,
   with a scrollbar down its side and a step rail eating a fifth of the
   width, is the desktop card squeezed rather than a phone design. So under
   560px it rises from the bottom edge with a handle, rounded at the top
   only; the numbered rail shrinks and the connecting line goes; the pills
   and the tray tighten; and the tray's Paste button drops under its words
   at full width rather than wrapping beside them. Nothing changes above
   560px. */
@media(max-width:560px){
  .hm-overlay{ padding:0; align-items:flex-end; }
  .hm-modal{
    max-width:none; border-radius:22px 22px 0 0; padding:1.1rem 1rem calc(1rem + env(safe-area-inset-bottom));
    max-height:92vh; animation:hmSheet .3s cubic-bezier(.2,.8,.2,1);
  }
  .hm-modal::after{
    content:""; position:absolute; top:.5rem; left:50%; width:36px; height:4px; margin-left:-18px;
    border-radius:100px; background:#DCD9E8;
  }
  .hm-modal-x{ top:.7rem; right:.7rem; }
  .hm-modal-eyebrow{ margin-top:.4rem; }
  .hm-modal h2{ font-size:1.25rem; margin-top:.6rem; }
  .hm-modal>p{ font-size:.84rem; margin-top:.25rem; }
  .hm-flow-step{ gap:.6rem; margin-top:.95rem; padding-bottom:.85rem; }
  .hm-flow-step:not(:last-child)::before{ display:none; }
  .hm-flow-n{ width:26px; height:26px; font-size:.76rem; }
  .hm-flow-b{ padding-top:.1rem; }
  .hm-flow-b>b{ font-size:.9rem; }
  .hm-flow-b>span{ font-size:.78rem; }
  .hm-flow-b .pb-ais-row{ margin-top:.55rem; gap:.35rem; }
  .hm-modal-wide .pb-ai{ padding:.5rem .8rem; }
  .hm-modal .pb-drop-head{ padding:.7rem .8rem; gap:.5rem; }
  .hm-modal .pb-drop-head-t{ min-width:0; flex:1 1 100%; }
  .hm-modal .pb-drop-head-t span{ display:none; }
  .hm-modal .pb-paste-btn{ width:100%; justify-content:center; }
  .hm-modal .pb-paste-box{ min-height:96px; }
  .hm-modal-quiet{ margin-top:.6rem; }
  /* COLUMN container: the vertical axis is justify-content, not
     align-items. Writing align-items here (copied from .hm-overlay, which is
     a ROW) left the sheet centred and floating clear of the bottom edge. */
  .pb-overlay.is-mini{ padding:0; justify-content:flex-end; align-items:stretch; }
  .pb-overlay.is-mini .pb-body{ max-width:none; width:100%; }
  .pb-mini{ border-radius:22px 22px 0 0; padding:1.1rem 1rem calc(1rem + env(safe-area-inset-bottom)); }
  .pb-mini-links{ margin-top:.6rem; }
}
@keyframes hmSheet{ from{ transform:translateY(24px); opacity:.6; } to{ transform:none; opacity:1; } }
@media(max-width:480px){
  .hm-modal h2{ font-size:1.25rem; }
}
@media(prefers-reduced-motion:reduce){
  .hm-modal{ animation:none; }
  .hm-modal-eyebrow .dot{ animation:none; }
}

.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; }
/* TWO LINES, AND THE SECOND ONE IS THE POINT.
   ---------------------------------------------------------------------------
   These were three identical pills under a paragraph explaining that they are
   not, in fact, identical — which model to prefer and, for Gemini, which model
   to switch to once you are there. An instruction about a button belongs on
   the button. See static/js/ais.js. */
.pb-ai{
  display:inline-flex; align-items:center; gap:.55rem;
  border:1px solid var(--line); border-radius:14px; padding:.5rem .8rem;
  background:var(--white); 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:.7rem; color:var(--slate); align-self:flex-start;
  margin-top:.15rem; margin-left:.15rem;
}
/* THE MARK ITSELF, ON NOTHING. These were letters on coloured tiles — and
   a "G" on green for Gemini, which is Google's letter on Google's green and
   so the one tile most likely to be misread. The real files are in
   static/brand/ai/; see the MARK map in static/js/ais.js. */
.pb-ai-m{ width:22px; height:22px; flex:none; display:block; object-fit:contain; }

.pb-ai-t{ display:flex; flex-direction:column; line-height:1.2; min-width:0; }
.pb-ai-t > b{ font:600 .85rem 'Inter',system-ui,sans-serif; color:var(--ink); }
.pb-ai-t > span{
  margin-top:.1rem;
  font:500 .705rem 'Inter',system-ui,sans-serif; color:var(--slate);
  white-space:nowrap;
}
/* "Switch it to Pro" — the one word that changes the result. */
.pb-ai-t > span b{ color:var(--accent-deep); font-weight:700; }

/* The recommended two sit forward. ChatGPT is not marked down, it is simply
   not marked up: same size, same shape, no second line. */
.pb-ai-best{ border-color:#DEDAF8; background:linear-gradient(180deg,#FCFBFF,var(--white)); }
/* Longer than Gemini's chat box takes: not a link, and it says so where
   "Switch it to Pro" was. Muted rather than alarming — nothing is wrong,
   it is simply the other two this time. */
.pb-ai-over{
  border-color:var(--line); border-style:dashed; background:var(--paper-2);
  color:var(--slate); cursor:not-allowed; opacity:.8;
}
.pb-ai-over .pb-ai-m{ opacity:.45; filter:grayscale(1); }
.pb-ai-over .pb-ai-t > b{ color:var(--slate); text-decoration:line-through; text-decoration-thickness:1.5px; text-decoration-color:#B4B0C9; }
.pb-ai-over .pb-ai-t > span{ color:var(--slate); }
.pb-ai-over > i{ color:#A6A3BE; }
.pb-ai-over:hover{ border-color:var(--line); transform:none; box-shadow:none; }

.pb-receipt-warn{ border-color:#F1E3B8; background:#FFF9EA; }
.pb-receipt-warn > i{ color:#C98A16; }
.pb-ai-best:hover{ border-color:var(--accent); }


/* ON A PHONE THEY BECOME A LIST, NOT A ROW.
   ---------------------------------------------------------------------------
   The old rule let the row wrap and hoped for the best. At 375px it produced
   "two cramped, one enormous": Claude and Gemini split 305px between them, so
   "Switch it to Pro" ran flush into the arrow with nothing between them, while
   ChatGPT — the one button carrying no recommendation — dropped to a line of
   its own and became the widest, easiest target on the screen.

   That is the hierarchy backwards at the exact moment it matters. This row is
   the hand-off: whichever button gets pressed decides whether the reply is a
   finished page or something that loads and disappoints, and the biggest
   button was voting for the third choice.

   Full-width rows fix it by removing the competition. Same width, same height,
   read top to bottom, best first — an ordered list, which is what this always
   was. The second line moves up ONTO the first, because a phone has width to
   spare here and height it does not; stacking two lines in each of three rows
   would push the paste tray under the fold to say the same words. */
@media(max-width:620px){
  .pb-ais-row{ display:grid; grid-template-columns:1fr; gap:.4rem; }
  .pb-ai{
    display:flex; width:100%; min-height:46px;
    justify-content:flex-start; align-items:center;
    gap:.6rem; padding:.55rem .8rem; border-radius:13px;
  }
  /* Name and note side by side. min-width:0 so the note can ellipsis at 320px
     instead of shoving the arrow off the end. */
  .pb-ai-t{
    flex:1 1 auto; min-width:0;
    flex-direction:row; align-items:baseline; gap:.45rem;
  }
  .pb-ai-t > span{ margin-top:0; overflow:hidden; text-overflow:ellipsis; }
  /* Pinned right, and no lift on tap — there is no hover on a phone, only the
     half-second where a finger is down and the button jumps. */
  .pb-ai > i{ align-self:center; margin-top:0; margin-left:.2rem; }
  .pb-ai:hover{ transform:none; box-shadow:none; }
  .pb-ai:active{ background:var(--paper-2); }
  /* The copy-guide modal shows the same row and sets its own wider padding at
     a specificity this block would otherwise lose to. */
  .hm-modal-wide .pb-ai{ padding:.55rem .8rem; }
}


/* =========================================================
   THE PASTE TRAY — one box, one paste.
   ========================================================= */
.pb-drop{
  margin-top:1.4rem;
  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;
}
/* The armed ring below expands outward as a box-shadow, and without this
   margin it had nothing but the gap prompt.css's own layout happened to
   leave above it — cramped against whatever sat directly before .pb-drop. */
.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;
}
/* `pre` is right for pasted code and wrong for the placeholder, which is the
   only thing in this box on the way in. On a phone the sentence ran off the
   right edge and the empty state read as broken. :placeholder-shown matches
   only while the box is empty, so the code that lands here still never wraps. */
.pb-paste-box:placeholder-shown{ white-space:pre-wrap; overflow-wrap:break-word; }
.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); }

/* WHICH PAGES TO BUILD — the row of pills under the description box.
   ---------------------------------------------------------------------------
   Slim, quiet and skippable. This replaced a bordered box announcing "You'll
   get 3 pages, linked up…" with a button to disagree, which stopped people
   on the way to the thing they came to type. Pills carry the same
   information at a glance and, unlike a sentence, they are also the control:
   one tap drops a page, one tap adds one. Nothing here is a card, a panel or
   a modal, because nothing here deserves that much of anybody's attention. */
.pb-pages{
  display:flex; align-items:center; flex-wrap:wrap; gap:.34rem;
  margin:.5rem 0 0; padding:0 .1rem;
  font:500 .78rem/1 'Inter',system-ui,sans-serif; color:var(--slate);
}
.pb-pages-l{
  font:600 .72rem/1 'Inter',system-ui,sans-serif;
  letter-spacing:.04em; text-transform:uppercase; color:#9AA0B8;
  margin-right:.15rem;
}
.pb-pill{
  display:inline-flex; align-items:center; gap:.1rem;
  padding:.24rem .3rem .24rem .55rem; border-radius:100px;
  border:1px solid var(--line); background:var(--white,#fff);
  color:var(--ink); font:600 .76rem/1 'Inter',system-ui,sans-serif;
  max-width:14ch;
}
.pb-pill > span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Home has no cross, so it needs the padding back on the right. */
.pb-pill.is-home{ padding-right:.55rem; color:var(--slate); }
.pb-pill-x{
  display:grid; place-items:center; width:18px; height:18px; flex:none;
  border:none; background:none; border-radius:50%; cursor:pointer;
  color:#AEB3C6; font-size:.72rem; padding:0;
  transition:background .14s, color .14s;
}
.pb-pill-x:hover{ background:#FBE9E6; color:var(--err,#D2503B); }
/* A finger is not a mouse pointer. On touch the cross keeps the same size on
   screen and gets a bigger box around it, pulled back with a negative margin
   so the pill itself doesn't grow: an 18px target for the one destructive
   control on this row is a tap people miss, and a miss here lands on the pill,
   which does nothing and reads as "the button is broken". */
@media (hover:none){
  .pb-pill-x{ width:28px; height:28px; margin:-5px -4px -5px -2px; font-size:.8rem; }
  .pb-pill{ padding-top:.3rem; padding-bottom:.3rem; }
}
.pb-pill-add{
  width:26px; height:26px; padding:0; max-width:none; cursor:pointer;
  justify-content:center; color:var(--slate);
  border-style:dashed; transition:border-color .15s,color .15s,background .15s;
}
.pb-pill-add:hover, .pb-pill-add.on{
  border-color:var(--accent,#5B4BE8); border-style:solid;
  color:var(--accent-deep,#3B2FB0); background:var(--lilac,#F0EDFE);
}

/* The + opened: this kind's own pages first (putting one back has to be one
   tap), then a box for anything else. A row of its own so the pills above it
   don't reflow every time it opens. */
.pb-pages-new{
  flex:1 1 100%; display:flex; align-items:center; flex-wrap:wrap; gap:.3rem;
  margin-top:.2rem; padding-top:.42rem; border-top:1px dashed var(--line);
}
.pb-idea{
  display:inline-flex; align-items:center; gap:.15rem;
  padding:.24rem .55rem .24rem .4rem; border-radius:100px;
  border:1px solid var(--line); background:var(--white,#fff); cursor:pointer;
  color:var(--slate); font:600 .74rem/1 'Inter',system-ui,sans-serif;
  transition:border-color .15s,color .15s,background .15s;
}
.pb-idea i{ font-size:.8rem; opacity:.7; }
.pb-idea:hover{
  border-color:var(--accent,#5B4BE8); color:var(--accent-deep,#3B2FB0);
  background:var(--lilac,#F0EDFE);
}
.pb-pages-own{ display:inline-flex; align-items:center; gap:.25rem; }
.pb-page-in{
  width:11ch; padding:.26rem .55rem; border-radius:100px;
  border:1px solid var(--line); background:var(--white,#fff);
  font:500 .74rem/1 'Inter',system-ui,sans-serif; color:var(--ink); outline:none;
  transition:border-color .15s, width .15s;
}
.pb-page-in:focus{ border-color:var(--accent,#5B4BE8); width:14ch; }
.pb-page-in::placeholder{ color:#AEB3C6; }
.pb-page-go{
  padding:.26rem .62rem; border-radius:100px; cursor:pointer;
  border:1px solid transparent; background:var(--accent,#5B4BE8); color:#fff;
  font:700 .73rem/1 'Inter',system-ui,sans-serif;
}
.pb-page-go:hover{ background:var(--accent-deep,#3B2FB0); }

@media (max-width:620px){
  .pb-page-in{ flex:1; width:auto; min-width:8ch; }
  .pb-pages-own{ flex:1 1 100%; }
}

.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; }
/* The pages that came back, when there was more than one. Buttons rather
   than labels: the receipt is the first place somebody can touch a second
   page, and the tap that proves it exists is worth more than the sentence
   saying it does. */
.pb-receipt-pages{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.8rem; }
.pb-page{
  display:inline-flex; align-items:center; gap:.4rem; cursor:pointer;
  background:var(--white); border:1px solid #9FD7BA; border-radius:100px;
  padding:.36rem .8rem; font:600 .78rem 'Inter',system-ui,sans-serif; color:#1F6B47;
  transition:background .15s, border-color .15s, transform .12s;
}
.pb-page:hover{ background:#EAF8F0; border-color:#6FC49A; transform:translateY(-1px); }
.pb-page:active{ transform:translateY(0); }
.pb-page i{ font-size:.85rem; opacity:.75; }

.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; }
.pb-receipt-go{ width:100%; margin-top:.9rem; justify-content:center; }

/* THE PASTE THAT DIDN'T TAKE.
   Same slot, same shape, amber instead of green. It sits under the box the
   text is still in, and it stays until the paste is fixed — the failure used
   to be a three-second toast on a page where the tray can be a screen away
   from where the toast lands. .pb-drop.has-problem repaints the tray itself so
   the whole component reads as "not yet" rather than one panel disagreeing
   with the border around it. */
.pb-drop.has-problem{ border-color:#F0C878; background:#FFFBF3; }
.pb-drop.has-problem .pb-receipt{ background:#FFF8EC; }
.pb-receipt-top.is-problem > i{ color:#D9891F; }
.pb-receipt-top.is-problem .pb-receipt-t b{ color:#8A5A0B; }
.pb-receipt-top.is-problem .pb-receipt-t span{ color:#7A5A22; }
.pb-receipt-acts{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.9rem; }
.pb-receipt-acts > *{ flex:1 1 auto; justify-content:center; min-width:150px; }

/* =========================================================
   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; justify-content:center; text-align:center;
  margin:.7rem 0 0; font:500 .8rem/1.5 'Inter',system-ui,sans-serif; color:var(--slate);
}
.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; }
/* One line under the button: the first thing still missing, tap to go there. */
.pb-apply-wait{ margin-top:.55rem; text-align:center; }
.pb-apply-wait-b{
  border:0; background:none; cursor:pointer; padding:.2rem .4rem; border-radius:8px;
  font:600 .78rem 'Inter',system-ui,sans-serif; color:#B27400;
}
.pb-apply-wait-b:hover{ background:#FFF6E6; }
.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 .9rem .7rem; }
  .pb-brief{ min-height:6.6rem; font-size:1rem; }

  .pb-theme{ height:32px; padding:0 .7rem 0 .42rem; gap:.4rem; }
  .pb-theme-t{ font-size:.74rem; }
  .pb-pal-c{ height:48px; }
  .pb-pal-hex{ display:none; }   /* no room, and the role is the useful half */
  .pb-copy{ max-width:none; padding-top:.9rem; padding-bottom:.9rem; }

  /* 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-theme, .pb-pal-c, .pb-pal-next i, .pb-sw button, .pb-ai, .pb-more i, .pb-paste-btn{ transition:none; }
  .pb-pal-modal-backdrop, .pb-pal-modal{ animation: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.
   --------------------------------------------------------------------------- */
/* ONE SEGMENTED TOGGLE, AND A THUMB THAT TRAVELS.
   ---------------------------------------------------------------------------
   This is the first thing a new visitor sees, and it has been through three
   shapes. Two bordered description cards: too heavy, out-shouting the writing
   box that is the actual point of the page. Then a flat segmented control:
   quiet, correct, and completely inert — the white half blinked from one side
   to the other and the whole thing read like a form control somebody had not
   got round to finishing.

   THE DIFFERENCE IS THAT THE SELECTED STATE IS NOW AN OBJECT, NOT A COLOUR.
   A thumb that slides between the halves gives the control physics: a groove
   with something sitting in it, a thing that moves when you press it, weight
   that carries a little past the stop and settles. None of that is decoration.
   A control that answers a press with movement tells you it worked before you
   have read a single word, which is exactly what is needed from the one
   element that has to be understood in the first second on the page.

   Three details that are doing the work, and are easy to lose:

     THE WEIGHT NEVER CHANGES. Both labels stay at 600, selected or not. Bump
     the selected one to 700 and the text reflows a pixel or two just as the
     thumb arrives over it — a tiny shudder that reads as cheap and is very
     hard to un-see once noticed.

     THE TRACK IS RECESSED. An inset shadow and a top-down darkening, so the
     thumb has somewhere to sit. A flat track with a shadowed thumb on it looks
     like a sticker.

     THE THUMB LEANS. Hover the half you have not chosen and it shifts three
     pixels toward you before you commit. Pure :has(), so it costs nothing and
     simply does not happen where it is not supported — and never on touch,
     where "hover" is the half-second before a tap and a moving target.

   Equal segments (grid-auto-columns:1fr) rather than content width: the thumb
   is one segment wide and travels exactly 100% of itself, which is only true
   while the halves are equal. It is also what makes this read as a switch
   rather than two buttons that happen to touch.
   ------------------------------------------------------------------------- */
.pb-kinds{
  --n:2;   /* segments. Set from KIND_ORDER by renderKind(). */
  --i:0;   /* which one the thumb is on. */
  position:relative; isolation:isolate;
  display:inline-grid; grid-auto-flow:column; grid-auto-columns:1fr;
  gap:0; margin:0 0 .55rem; padding:4px;
  background:
    linear-gradient(180deg, rgba(24,22,40,.045), rgba(24,22,40,0) 62%),
    var(--paper-2);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:inset 0 1px 2px rgba(24,22,40,.055);
}

/* BEFORE THE SCRIPT ARRIVES the track is empty, and an empty track drew as a
   thin bordered line that then popped open into the control. Now it holds
   the control's own footprint (two segments' worth) with a slow sheen, and
   the built control fades in over it in place — same size, no jump. */
.pb-kinds:empty{
  min-width:240px; min-height:42px; overflow:hidden; position:relative;
}
.pb-kinds:empty::before{
  content:""; position:absolute; top:4px; bottom:4px; left:4px; width:calc((100% - 8px) / var(--n));
  border-radius:10px; background:#fff; border:1px solid rgba(91,75,232,.08);
  box-shadow:0 1px 1px rgba(24,22,40,.04), 0 2px 4px -1px rgba(24,22,40,.05);
}
.pb-kinds:empty::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,.75) 50%, transparent 70%);
  transform:translateX(-100%); animation:pbShimmer 1.6s ease-in-out infinite;
}
.pb-kinds.is-built{ animation:pbKindsIn .28s ease-out both; }
@keyframes pbKindsIn{ from{ opacity:.35; } to{ opacity:1; } }
/* The thumb starts where it is, not where segment one is: no travel on the
   first paint of a restored choice. renderKind() lifts this after a frame. */
.pb-kinds.is-still .pb-kind-thumb{ transition:none; }

/* The thumb. Absolutely positioned against the track's PADDING box, which is
   why the 4px inset appears in both the offsets and the width: 100% here is
   the padding box, so one segment is (100% - 2 x padding) / n, and a travel of
   100% of the thumb's own width lands it exactly on the next segment. */
.pb-kind-thumb{
  position:absolute; z-index:0; pointer-events:none;
  top:4px; bottom:4px; left:4px;
  width:calc((100% - 8px) / var(--n));
  border-radius:10px;
  background:linear-gradient(180deg, #FFFFFF, #FCFBFF);
  border:1px solid rgba(91,75,232,.13);
  /* Contact shadow, ambient shadow, a soft accent glow so the chosen half is
     faintly the brand colour rather than merely white, and a top highlight. */
  box-shadow:
    0 1px 1px rgba(24,22,40,.05),
    0 2px 4px -1px rgba(24,22,40,.06),
    0 7px 16px -8px rgba(91,75,232,.45),
    inset 0 1px 0 #FFFFFF;
  transform:translateX(calc(var(--i) * 100%));
  /* Slightly past the stop, then back. The overshoot is what makes it feel
     like a weighted object instead of an animated rectangle. */
  transition:transform .4s cubic-bezier(.34,1.32,.5,1),
             translate .22s ease,
             box-shadow .18s ease;
}

.pb-kind{
  position:relative; z-index:1;
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  min-width:0; cursor:pointer; font-family:inherit;
  padding:.56rem 1.15rem; border:0; border-radius:10px;
  background:transparent; color:var(--slate);
  font:600 .85rem/1 'Inter',system-ui,sans-serif;
  letter-spacing:-.012em; white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
  transition:color .2s ease;
}
.pb-kind i{ font-size:.9rem; opacity:.6; transition:opacity .2s, color .2s; }

.pb-kind.active{ color:var(--accent-deep); }
.pb-kind.active i{ opacity:1; color:var(--accent); }

@media(hover:hover){
  .pb-kind:not(.active):hover{ color:var(--ink); }
  .pb-kind:not(.active):hover i{ opacity:.85; }
  /* The lean. :first-of-type / :last-of-type pick the buttons — the thumb is
     a span, so it is not of their type and does not count. */
  .pb-kinds:has(.pb-kind:first-of-type:not(.active):hover) .pb-kind-thumb{ translate:-3px 0; }
  .pb-kinds:has(.pb-kind:last-of-type:not(.active):hover)  .pb-kind-thumb{ translate:3px 0; }
}

/* ONE OPTION IS NOT A CHOICE.
   Some /use-cases pages pin the kind, and renderKind() then draws a single
   segment. A groove with a raised thumb in it reads as pressable, so a
   one-segment control is a switch that cannot switch — and the better the
   control looks, the more of a lie that is. Flattened to what it actually is
   there: a label saying what this page builds. */
.pb-kinds:has(.pb-kind:only-of-type){
  padding:0; background:none; border-color:transparent; box-shadow:none;
}
.pb-kinds:has(.pb-kind:only-of-type) .pb-kind-thumb{ display:none; }
.pb-kinds:has(.pb-kind:only-of-type) .pb-kind{
  padding:0 0 0 .2rem; cursor:default; color:var(--accent-deep);
}

/* Pressed. The thumb loses its lift and settles into the groove, rather than
   scaling — a scale would also shrink the translate that positions it and the
   thumb would visibly slide backwards under the finger. */
.pb-kinds:active .pb-kind-thumb{
  box-shadow:
    0 1px 1px rgba(24,22,40,.06),
    0 1px 2px rgba(24,22,40,.05),
    inset 0 1px 0 #FFFFFF;
}

/* Drawn inside the segment so the ring follows the thumb's shape rather than
   boxing the whole track. */
.pb-kind:focus-visible{ outline:none; }
.pb-kind:focus-visible::after{
  content:""; position:absolute; inset:1px; border-radius:9px;
  box-shadow:0 0 0 2px var(--accent);
}

/* Full width on a phone so both halves are easy to hit. Not taller than it has
   to be: a full-width slab at the top of the page is the thing that pushes the
   writing box under the fold. */
@media(max-width:560px){
  .pb-kinds{
    display:grid; width:100%;
    margin-bottom:.5rem; padding:5px; border-radius:15px;
  }
  .pb-kind-thumb{
    top:5px; bottom:5px; left:5px;
    width:calc((100% - 10px) / var(--n));
    border-radius:11px;
  }
  .pb-kinds:empty{ min-width:0; min-height:56px; }
  .pb-kinds:empty::before{ top:5px; bottom:5px; left:5px; width:calc((100% - 10px) / var(--n)); border-radius:11px; }
  /* .9rem puts the segment itself at 44px, the touch target both platforms
     ask for. The track's own 5px groove sits outside that and is not
     tappable, so it cannot be counted toward it. */
  .pb-kind{ padding:.9rem 1rem; font-size:.875rem; border-radius:11px; }
  .pb-kind i{ font-size:.95rem; }
  .pb-kind-cap{ margin-bottom:.85rem; }
}

/* The caption. Deliberately quiet and deliberately NOT reserving two lines:
   every hint is written to fit one, and a min-height for a case that does not
   happen is a permanent gap under the control. It fades up on change, which is
   the second half of the answer the thumb starts. */
.pb-kind-cap{
  margin:0 0 .95rem; padding-left:.2rem;
  font:400 .79rem/1.4 'Inter',system-ui,sans-serif; color:var(--slate);
}
.pb-kind-cap:empty{ display:none; }
.pb-kind-cap.is-in{ animation:pbCapIn .26s cubic-bezier(.2,.7,.3,1) both; }
@keyframes pbCapIn{
  from{ opacity:0; transform:translateY(3px); }
  to  { opacity:1; transform:none; }
}

@media(prefers-reduced-motion:reduce){
  .pb-kind, .pb-kind i, .pb-kind-thumb{ transition:none; }
  .pb-kind-cap.is-in{ animation:none; }
  .pb-kinds:empty::after, .pb-kinds.is-built{ animation:none; }
}

/* ---------------------------------------------------------------------------
   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); }
/* The empty state IS the drop target — a single dashed card, not a labelled
   section wrapping a second one. Three short lines, said once each. */
.pb-photos-empty{
  display:flex; flex-direction:column; align-items:center; gap:.3rem; text-align:center;
  width:100%; padding:1.4rem 1.1rem; margin-top:1rem;
  border-style:dashed; border-color:#D6D1F5; background:var(--lilac,#F4F2FE);
  cursor:pointer; font-family:inherit; transition:background .15s,border-color .15s,transform .15s;
}
.pb-photos-empty:hover{ background:#E9E5FC; border-color:var(--accent); transform:translateY(-1px); }
.pb-photos-empty:disabled{ opacity:.55; cursor:progress; transform:none; }
.pb-photos-empty b{ font-size:.92rem; font-weight:700; color:var(--ink); }
.pb-photos-empty > span{ font-size:.78rem; font-weight:400; color:var(--slate); max-width:36ch; }
.pb-photos-head{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-bottom:.5rem; }
.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-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;
  margin-top:.6rem; color:var(--slate); background:transparent; border:1px solid var(--line);
}
.pb-photos-more:hover{ background:var(--paper-2); color:var(--ink); }
.pb-photos-more:disabled{ opacity:.55; cursor:progress; }
.pb-drop-plus{
  display:grid; place-items:center; width:38px; height:38px; border-radius:100px;
  background:#fff; color:var(--accent); font-size:1.15rem;
  box-shadow:0 2px 8px -3px rgba(91,75,232,.4);
}

/* ---------------------------------------------------------------------------
   Which chat — the single most consequential choice in the builder
   --------------------------------------------------------------------------- */

/* 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. */


/* 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: 28px;
  flex: 0 0 auto;
  box-sizing: border-box;
  align-self: center;

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

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

  color: #4A4570;
  font: 600 .78rem/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 "AI chooses" 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; }
}


/* =========================================================
   CONTACT FORM — the toggle, the field chips, the router
   Added with the Messages feature. Everything here is new
   markup; nothing above was changed.
   ========================================================= */

/* The "include a working contact form" checkbox on a new page. Styled as a
   card rather than a bare checkbox because it is the only optional extra in
   the step and it changes what gets built, so it has to read as a decision
   rather than a preference. */

/* Field chips. Same visual language as .pb-gf so a returning user recognises
   them, but laid out as a wrapping grid because there are nine, not three. */
.pb-fields{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.9rem; }
.pb-field{
  border:1px solid var(--line); background:var(--white); border-radius:100px;
  padding:.42rem .8rem; font:600 .78rem 'Inter',system-ui,sans-serif; color:var(--slate);
  cursor:pointer; display:inline-flex; align-items:center; gap:.4rem;
  transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.pb-field:hover{ border-color:#C9C2EC; color:var(--ink-soft); }
.pb-field i{ font-size:.82rem; opacity:.65; }
.pb-field.on{ border-color:var(--accent); color:var(--accent-deep); background:var(--lilac); }
.pb-field.on i{ opacity:1; }

.pb-brief-slim{ margin-top:.9rem; }


/* The line that replaced the "It's a" picker. A statement, so it is styled
   like a note and not like a control — nothing here is clickable, and the one
   place that CAN change the type is named in the text. */
.pb-kind-note{
  display:flex;align-items:flex-start;gap:.5rem;
  padding:.6rem .75rem;margin-bottom:.9rem;
  border:1px dashed var(--line,#E6E3DA);border-radius:12px;
  background:var(--paper,#FBFAF7);
  font:500 .8rem/1.5 'Inter',system-ui,sans-serif;color:var(--slate,#5A5E6B);
}
.pb-kind-note i{ color:var(--accent,#5B4BE8);font-size:.95rem;margin-top:.1rem;flex:none; }
.pb-kind-note b{ color:var(--ink,#151823);font-weight:700; }

/* =========================================================
   "WRITTEN FOR YOU" — one quiet line above the brief box on
   "Add to this page" once a Quick Add card has filled it in,
   with the way back. The box itself is the plain .pb-brief-wrap
   every other mode uses.
   ========================================================= */
.pb-own-line{
  display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
  margin:0 0 .5rem; font:500 .78rem/1.4 'Inter',system-ui,sans-serif; color:var(--slate);
}
.pb-own-line > i{ color:var(--accent); font-size:.85rem; }
.pb-own-line b{ color:var(--ink); font-weight:700; }
.pb-own-clear{
  margin-left:auto; display:inline-flex; align-items:center; gap:.3rem; cursor:pointer;
  border:1px solid var(--line); background:var(--white); border-radius:100px;
  padding:.28rem .55rem; font:600 .72rem 'Inter',system-ui,sans-serif; color:var(--slate);
  transition:border-color .15s, color .15s, background .15s;
}
.pb-own-clear:hover{ border-color:var(--accent); color:var(--accent-deep); background:var(--lilac); }
.pb-own-clear i{ font-size:.66rem; }

/* ---------------------------------------------------------
   The examples fold. Shut whenever the step is drawn, and
   quiet: one muted line under the box, no pill, no border.
   The box is the feature; this is the help somebody asks
   for when they are stuck.
   --------------------------------------------------------- */
.pb-qa-fold{ margin:.55rem 0 .85rem; }
.pb-qa-fold > summary{
  display:inline-flex; align-items:center; gap:.4rem; cursor:pointer;
  list-style:none; max-width:100%;
  padding:.2rem 0; border:0; background:none;
  font:500 .78rem 'Inter',system-ui,sans-serif; color:var(--slate);
  transition:color .15s;
}
.pb-qa-fold > summary::-webkit-details-marker{ display:none; }
.pb-qa-fold > summary:hover{ color:var(--accent-deep); }
.pb-qa-fold > summary:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; }
.pb-qa-fold > summary > i:first-child{ color:var(--accent); font-size:.85rem; }
.pb-qa-chev{ font-size:.62rem; opacity:.7; transition:transform .18s; }
.pb-qa-fold[open] > summary .pb-qa-chev{ transform:rotate(180deg); }
.pb-qa-fold .pb-qa{ margin:.65rem 0 0; }

/* The kind picker used to carry a three-pass sheen-and-ripple cue, because the
   old pill strip shipped with one option already selected and so read as a
   label rather than a question. Two described cards with a visible empty tick
   do not have that problem, and the cue — built to sweep across a single
   bordered container — ran over the gap between them instead. Removed rather
   than retuned: the affordance is in the control now. */

/* ===========================================================================
   THE KIND CHIPS (kindrow.js)
   ---------------------------------------------------------------------------
   One row of small pills under the Website/Web app toggle — Business,
   Portfolio, Landing page… or Calculator, Quiz, Game… The lit one is filled
   in the accent; one that lit itself from the words carries a small wand.
   The app side folds its second eight behind "8 more" on a laptop; on a
   phone the whole row scrolls sideways instead, with the last chip half cut
   off as the hint.
   =========================================================================== */
.pk-row{ display:flex; flex-wrap:wrap; gap:.35rem; margin:0 0 .75rem; }
.pk-row[hidden]{ display:none; }
.pk-chip{
  display:inline-flex; align-items:center; gap:.35rem; height:32px; padding:0 .7rem 0 .6rem;
  border-radius:100px; border:1.5px solid var(--line); background:var(--white);
  color:var(--ink-soft); font:600 .78rem 'Inter',system-ui,sans-serif; cursor:pointer; white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
  animation:pkIn .26s ease-out both; animation-delay:calc(var(--i, 0) * 18ms);
  transition:border-color .15s, background .15s, color .15s, box-shadow .15s, transform .15s;
}
@keyframes pkIn{ from{ opacity:0; transform:translateY(3px); } to{ opacity:1; transform:none; } }
.pk-chip > i:first-child{ font-size:.92rem; color:var(--accent); opacity:.85; transition:color .15s, opacity .15s; }
.pk-chip:hover{ border-color:#C6C0EC; background:var(--lilac); color:var(--accent-deep); }
.pk-chip:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.pk-chip.is-on{
  border-color:var(--accent); background:var(--accent); color:#fff;
  box-shadow:0 6px 14px -8px rgba(91,75,232,.65);
}
.pk-chip.is-on > i:first-child{ color:#fff; opacity:1; }
.pk-auto{ font-size:.7rem; opacity:.9; margin-left:-.1rem; }
.pk-chip.is-extra{ display:none; }
.pk-more{ border-style:dashed; background:transparent; color:var(--slate); font-weight:500; }
.pk-more:hover{ border-style:solid; }
.pk-more i{ font-size:.7rem; transition:transform .18s; }
.pk-more.is-open i{ transform:rotate(180deg); }
.pk-chip.is-other{ color:var(--slate); }
.pk-chip.is-other > i:first-child{ color:var(--slate); }
.pk-chip.is-other.is-on{ color:#fff; }
.pk-chip.is-other.is-on > i:first-child{ color:#fff; }

/* The copy button was pressed with no kind picked: the row answers. */
.pk-row.is-nudged .pk-chip{ animation:pkNudge .9s ease-out both; animation-delay:calc(var(--i, 0) * 30ms); }
@keyframes pkNudge{
  0%{ box-shadow:0 0 0 0 rgba(91,75,232,0); }
  30%{ box-shadow:0 0 0 5px rgba(91,75,232,.22); transform:translateY(-2px); }
  100%{ box-shadow:0 0 0 0 rgba(91,75,232,0); transform:none; }
}

@media(max-width:560px){
  .pk-row{
    flex-wrap:nowrap; gap:.4rem; margin-bottom:.6rem; overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x proximity; scrollbar-width:none; padding:.15rem 0 .45rem;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
            mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
  }
  .pk-row::-webkit-scrollbar{ display:none; }
  .pk-chip{ flex:none; height:36px; scroll-snap-align:start; font-size:.8rem; }
  .pk-chip.is-extra{ display:inline-flex; }
  .pk-more{ display:none; }
}
@media(prefers-reduced-motion:reduce){
  .pk-chip, .pk-row.is-nudged .pk-chip{ animation:none; transition:none; }
}

/* THE PILL: the pick the empty box is typing out — "Live weather app",
   "Snake" — one tap from being in the box. In the card's bottom corner,
   only while the box is empty and unfocused (the typewriter's own
   conditions), so it never sits over anyone's words. A soft glow breathes
   so the eye finds it, and the name slides up when it changes. */
.pb-use{
  position:absolute; right:.7rem; bottom:.65rem; z-index:1;
  display:inline-flex; align-items:center; gap:.4rem; height:30px; padding:0 .75rem 0 .65rem;
  border-radius:100px; border:1px solid #D9D3F6; cursor:pointer;
  background:linear-gradient(90deg,#F3F0FF,#EAF7F6);
  font:600 .76rem 'Inter',system-ui,sans-serif; color:var(--accent-deep);
  box-shadow:0 0 0 0 rgba(91,75,232,.18);
  animation:pkIn .3s ease-out both, pbPillBreath 3.2s ease-in-out 1s infinite;
  transition:background .15s, border-color .15s, transform .15s;
  max-width:calc(100% - 1.4rem); overflow:hidden;
}
@keyframes pbPillBreath{ 0%,100%{ box-shadow:0 0 0 0 rgba(91,75,232,.0); } 50%{ box-shadow:0 0 0 4px rgba(91,75,232,.14); } }
.pb-use[hidden]{ display:none; }
.pb-use > i:first-child{ font-size:.8rem; color:var(--accent); }
.pb-use > i:last-child{ font-size:.72rem; color:var(--accent); opacity:.8; }
.pb-use-l{ font-weight:500; color:var(--slate); }
.pb-use-t{ display:inline-block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:170px; }
.pb-use-t.is-swap{ animation:pbSwap .38s cubic-bezier(.2,.8,.2,1); }
@keyframes pbSwap{ from{ opacity:0; transform:translateY(7px); } to{ opacity:1; transform:none; } }
.pb-use:hover{ background:linear-gradient(90deg,#ECE7FF,#DFF4F2); border-color:#C6C0EC; transform:translateY(-1px); }
.pb-use:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
/* Room under the words while the pill is showing, so a long example never
   runs under it. */
.pb-brief-wrap:has(.pb-use:not([hidden])) .pb-brief{ padding-bottom:2.2rem; }

/* The copy button was pressed with an empty box: the box answers. */
.pb-brief-wrap.is-nudged{ animation:pbNudgeBox .8s ease-out; }
@keyframes pbNudgeBox{
  0%{ box-shadow:0 0 0 0 rgba(91,75,232,0); }
  35%{ box-shadow:0 0 0 6px rgba(91,75,232,.22); border-color:var(--accent); }
  100%{ box-shadow:0 1px 2px rgba(21,24,35,.04), 0 16px 36px -24px rgba(91,75,232,.45); }
}
@media(max-width:560px){
  .pb-use{ height:32px; font-size:.78rem; }
  .pb-use-l{ display:none; }
  .pb-use-t{ max-width:150px; }
}
@media(prefers-reduced-motion:reduce){
  .pb-use, .pb-use-t.is-swap, .pb-brief-wrap.is-nudged{ animation:none; }
}

/* The copy button, gated: an app with no kind is not copied. It still
   presses (it scrolls to the chips); it just doesn't promise a copy. */
.pb-copy.is-gated{
  background:#EEF0F3 !important; color:#5A5E6B !important;
  box-shadow:none !important; animation:none !important;
}
.pb-copy.is-gated:hover{ background:#E4E6EC !important; transform:none !important; }

/* ===========================================================================
   YOUR OWN PHOTOS  (static/js/draftpix.js)
   ---------------------------------------------------------------------------
   One optional strip in step 1 of both builders. It has to read as a nice
   thing to do rather than a step to complete, so: no number, no tick, the
   word "optional" in the heading, and a resting state that is one dashed
   tile rather than an empty grid waiting to be filled.

   EVERYTHING HERE IS A TILE OF THE SAME SIZE. The add control used to be a
   button standing beside the photos rather than among them — a 104px box
   with its padding outside the height, so its edges missed the thumbnails
   and its label floated in the middle of a row that ended lower down. Now it
   is the same <figure> as a photo: a 96px square where the thumbnail goes,
   and its words where the note boxes are. Nothing to align by hand.

   It also lost a row. The filename under each photo was monospaced, usually
   truncated, and answered a question nobody asks — the picture above it
   says which photo this is. It lives on the input's title instead.
   =========================================================================== */
.dp{ margin:.7rem 0 0; }
.dp-head{ display:flex; align-items:center; gap:.45rem; flex-wrap:wrap; margin-bottom:.4rem; }
.dp-h{
  display:inline-flex; align-items:center; gap:.35rem;
  font:650 .8rem 'Inter',system-ui,sans-serif; color:var(--ink);
}
.dp-h i{ color:var(--accent,#5B4BE8); font-size:.9rem; }
/* "optional" is a word, not a badge. A bordered chip made the one part of
   step 1 nobody has to do look like the one part with a status. */
.dp-h em{
  font:500 .72rem 'Inter',system-ui,sans-serif; font-style:normal;
  color:#9AA0B8; margin-left:.05rem;
}
.dp-sub{ flex:1 1 18ch; font:400 .76rem/1.4 'Inter',system-ui,sans-serif; color:var(--slate); }

.dp-grid{ display:flex; flex-wrap:wrap; gap:.55rem; align-items:flex-start; }

/* The resting state: one dashed pill, the width of a sentence, so it reads as
   an offer rather than as six empty slots that have to be filled. */
.dp-add{
  box-sizing:border-box; cursor:pointer;
  background:var(--white,#fff); border:1.5px dashed #C9C3EC; border-radius:12px;
  font:600 .82rem 'Inter',system-ui,sans-serif; color:var(--accent-deep,#3B2FB0);
  transition:border-color .15s, background .15s, transform .12s;
}
.dp-add:hover{ border-color:var(--accent,#5B4BE8); background:var(--lilac,#F0EDFE); transform:translateY(-1px); }
.dp-add-wide{ display:inline-flex; align-items:center; gap:.45rem; min-height:46px; padding:.6rem .95rem; }
.dp-add-wide i{ font-size:.9rem; }

.dp-tile{ position:relative; margin:0; width:96px; }
.dp-thumb{
  width:96px; height:96px; border-radius:12px; overflow:hidden;
  background:var(--paper-2,#F6F5FC); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
}
.dp-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

/* The add tile: exactly the thumbnail's box, so the row has one top edge and
   one bottom edge across every square in it. */
.dp-tile.is-add .dp-add{ display:grid; place-items:center; width:96px; height:96px; padding:0; font-size:1.05rem; }
.dp-add-l{
  display:block; padding:.3rem .2rem 0; text-align:center;
  font:600 .72rem/1.2 'Inter',system-ui,sans-serif; color:var(--accent-deep,#3B2FB0);
}
.dp-tile.is-busy .dp-add-l{ color:var(--slate); font-weight:500; }

.dp-x{
  position:absolute; top:-6px; right:-6px; z-index:2; cursor:pointer;
  width:22px; height:22px; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:100px;
  background:var(--white,#fff); color:var(--slate); font-size:.62rem; line-height:1;
  box-shadow:0 1px 4px rgba(20,16,60,.14);
  opacity:0; transform:scale(.8); transition:opacity .15s, transform .15s, color .15s, border-color .15s;
}
.dp-tile:hover .dp-x, .dp-tile:focus-within .dp-x{ opacity:1; transform:scale(1); }
.dp-x:hover{ color:#C0392B; border-color:#F0B8B0; }
/* A touch screen has no hover, so the control is simply always there. */
@media (hover:none){ .dp-x{ opacity:1; transform:scale(1); } }

.dp-tile figcaption{ display:block; margin-top:.3rem; }
/* The note reads as a caption until it is wanted. Six boxed fields under six
   photos is a form; six quiet captions is a strip of photos you can label. */
.dp-note{
  width:100%; box-sizing:border-box; text-align:center;
  font:500 .72rem 'Inter',system-ui,sans-serif; color:var(--ink);
  background:transparent; border:1px solid transparent; border-radius:8px;
  padding:.28rem .3rem; transition:border-color .15s, background .15s, box-shadow .15s;
}
.dp-note::placeholder{ color:#AEB3C6; font-weight:400; }
.dp-note:hover{ border-color:var(--line); background:var(--white,#fff); }
.dp-note:focus{
  outline:0; border-color:var(--accent,#5B4BE8);
  background:var(--white,#fff); box-shadow:0 0 0 3px rgba(91,75,232,.14);
}

/* The answers people actually give, one tap away. They appear under the grid
   while a note box has focus and take the place of typing for most people;
   the last answer is still just typing. */
.dp-hints{ display:flex; flex-wrap:wrap; gap:.28rem; margin-top:.45rem; }
.dp-hint{
  cursor:pointer; border:1px solid var(--line); background:var(--white,#fff);
  border-radius:100px; padding:.24rem .58rem;
  font:500 .72rem 'Inter',system-ui,sans-serif; color:var(--slate);
  transition:border-color .15s, color .15s, background .15s;
}
.dp-hint:hover{ border-color:var(--accent,#5B4BE8); color:var(--accent-deep,#3B2FB0); background:var(--lilac,#F0EDFE); }

.dp-tile.is-busy .dp-thumb{ border-style:dashed; }
.dp-spin{
  width:20px; height:20px; border-radius:100px;
  border:2px solid #DCD6FA; border-top-color:var(--accent,#5B4BE8);
  animation:dp-spin .7s linear infinite;
}
@keyframes dp-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .dp-spin{ animation-duration:2s; } }

/* Dragging a file anywhere over the strip. The whole strip lights, not just
   the tile, because on a phone-sized layout the tile is a small target and
   people aim at the words. */
.dp.over .dp-grid{ outline:2px dashed var(--accent,#5B4BE8); outline-offset:6px; border-radius:16px; }

@media (max-width:560px){
  .dp-tile{ width:78px; }
  .dp-thumb, .dp-tile.is-add .dp-add{ width:78px; height:78px; }
  .dp-note{ font-size:.68rem; padding:.24rem .2rem; }
  .dp-add-l{ font-size:.68rem; }
}

/* =========================================================
   THE PICK CARD (prompt.js pickCardHtml)
   The mini card with a step in front of the hand-off, for a job whose one
   remaining question fits on the card. Putting your own photos on a page is
   the whole of that job: which pictures, and anything you want saying about
   them. It used to be step three of the five-step builder.
   ========================================================= */
.pb-pickcard h2{ margin-bottom:.3rem; }
.pb-pick-wrap{
  margin:.9rem 0 0; padding:.75rem; border-radius:14px;
  border:1px solid var(--line); background:var(--paper);
  max-height:min(46vh, 340px); overflow-y:auto; overscroll-behavior:contain;
}
.pb-pick-wrap .pb-chip-row{ margin-top:.5rem; }
/* The card is its own frame, so the picker inside it does not need a second
   one — and the "tap a photo" nudge is the card's whole heading already. */
.pb-pick-wrap .pb-chip-cta{ display:none; }

.pb-pick-extra{ display:block; margin-top:.8rem; }
.pb-pick-extra > span{
  display:block; margin-bottom:.3rem;
  font:600 .8rem 'Inter',system-ui,sans-serif; color:var(--ink);
}
.pb-pick-extra em{ font-style:normal; font-weight:400; color:var(--slate); }
.pb-pick-extra input{
  width:100%; padding:.6rem .7rem; border:1px solid var(--line); border-radius:11px;
  font:400 .88rem 'Inter',system-ui,sans-serif; color:var(--ink); background:#fff;
}
.pb-pick-extra input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(91,75,232,.14); }

.pb-pick-go{ margin-top:.9rem; }
.pb-pick-go .pb-go{ margin:0; }
.pb-pick-go .pb-go:disabled{ opacity:.45; cursor:default; }
.pb-pick-none{
  margin:.6rem 0 0; text-align:center;
  font:400 .78rem 'Inter',system-ui,sans-serif; color:var(--slate);
}

/* =========================================================
   THE KEYBOARD, ON A PHONE
   The mini card is a bottom sheet, and a bottom sheet sits at the bottom of
   the LAYOUT viewport — which the on-screen keyboard covers. So the sheet
   was being typed into from behind the keyboard. --pb-kb is how much of the
   screen the keyboard has taken (prompt.js bindViewport); it is 0 on every
   desktop and whenever the keyboard is down, so these rules cost nothing
   the rest of the time.
   ========================================================= */
.pb-overlay{ --pb-kb:0px; }
@media(max-width:700px){
  .pb-overlay.is-mini{ padding-bottom:var(--pb-kb); }
  .pb-overlay.is-mini .pb-mini{
    max-height:calc(100dvh - var(--pb-kb) - 8px); overflow-y:auto; overscroll-behavior:contain;
  }
  .pb-overlay:not(.is-mini) .pb-body{ padding-bottom:var(--pb-kb); }
  /* With the keyboard up there is no room for a picker AND a box to type in,
     and the box is the one being used. */
  .pb-overlay.is-pick .pb-pick-wrap{ max-height:min(34vh, 240px); }
}