/* clickto.app — Power Mode
   ===========================================================================
   Loaded in TWO places and it has to work in both:

     /power    after projects.css + prompt.css + start.css (the light "paper"
               shell — .page-head, the numbered .pb-step rail, .btn, .field)
     /editor   after editor.css + prompt.css (same tokens, different shell)

   Both define the same design tokens on :root, so everything here is written
   against them (--accent, --line, --paper-2, --slate, --shadow-*) with a
   literal fallback on each. Nothing below assumes either page's layout — the
   picker is a self-contained component that renders wherever it is mounted.

   Two namespaces, and the split is deliberate:
     .pw-*   the picker component + the /power page. Shared.
     .pwe-*  the editor's panel chrome only. Never loaded by /power's markup.

   ---------------------------------------------------------------------------
   THE COLOUR SYSTEM SAYS WHICH KIND OF THING SOMETHING IS
   ---------------------------------------------------------------------------
   Features are indigo (the product's own accent — they are things the page can
   now do). Live data is teal (it comes from outside — it is not ours). That one
   distinction is carried by every chip, tab, card tick and counter, so a strip
   holding eight things is readable at a glance without anybody reading a word.
   =========================================================================== */

:root{
  --pw-p:#5B4BE8;            /* features — the product accent */
  --pw-p-deep:#4536C4;
  --pw-p-soft:#EEEBFC;
  --pw-p-line:#DEDAF8;

  --pw-d:#0E8F8A;            /* live data — from outside */
  --pw-d-deep:#0A6D69;
  --pw-d-soft:#E4F5F3;
  --pw-d-line:#BFE6E2;

  --pw-grad:linear-gradient(120deg,#5B4BE8,#7A3FE4 48%,#0EA5A4);
  --pw-r:14px;
}

[hidden]{ display:none !important; }

/* =========================================================================
   SIDEBAR — where the eye should land, and where it shouldn't
   -------------------------------------------------------------------------
   Pro Mode had a violet bolt and a green FREE badge, and sat above Account.
   Between them that made the OPTIONAL row the loudest thing in the nav —
   louder than Start, which is the one everybody should use first. A second
   front door shouting over the main one just makes people hesitate at both.
   So Pro Mode now has no rule here at all: it inherits the same slate as
   Account and Upgrade, and it sits last (see the templates).

   Start gets what Pro Mode gave up. Selected off its href rather than a new
   class, because that row is the same shared markup on six pages and this
   needs no edit to any of them.
   ========================================================================= */
.sb-nav .nav-item[href="/start"] i{ color:var(--accent,#5B4BE8); }
.sb-nav .nav-item[href="/start"]:hover i,
.sb-nav .nav-item[href="/start"].active i{ color:var(--accent-deep,#4536C4); }
.bottom-nav .bn-item[href="/start"] i{ color:var(--accent,#5B4BE8); }

/* =========================================================================
   /power PAGE HEAD
   ========================================================================= */
.pw-wrap .page-head{ padding-bottom:20px; }

.pw-eyebrow{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.pw-free{
  font-family:'Space Mono',monospace; font-size:.7rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  background:#E3F6EC; color:#1F7A50; border-radius:100px; padding:.2rem .55rem;
}
.pw-grad{
  background:var(--pw-grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:var(--pw-p,#5B4BE8);
}
.pw-head p a{ color:var(--accent-deep,#4536C4); font-weight:600; text-decoration:underline; }

/* Two quiet text buttons stacked at the top-right of the header. .head-row
   (projects.css) aligns its children to the bottom, so they sit level with the
   intro paragraph rather than floating beside the h1. */
.pw-head-acts{
  flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-start; gap:.1rem;
}
@media(max-width:640px){
  .pw-head-acts{ flex-direction:row; flex-wrap:wrap; gap:.1rem 1rem; }
}

/* Step 2 is the reason the page exists, so its number is the only one on the
   rail that is filled in before anybody has done anything.
   -------------------------------------------------------------------------
   :not(.done) is load-bearing. prompt.css marks a finished step by setting
   the number to `color:transparent` and drawing a tick in an ::after on top
   of it. Without the guard, this rule's `color:#fff` has equal specificity
   and wins on source order — so a completed step 2 showed a white "2" sitting
   underneath a white tick. Once the step is done, this rule steps aside
   entirely and prompt.css's own done state applies untouched. */
.pw-step-hero:not(.done) > .pb-step-h .pb-n{
  background:var(--pw-grad); border-color:transparent; color:#fff;
}

/* =========================================================================
   RECIPES — the "in seconds" path, folded away
   The fold itself is prompt.css's .pb-qa-fold, borrowed wholesale so this and
   the editor's Quick Adds are visibly the same control. Only the contents
   below are local. Inside, a slider: one row tall, native scroll and swipe,
   and it works with no JS at all.
   ========================================================================= */
.pw-rec-fold{ margin:1rem 0 1.15rem; }
.pw-rec-fold > summary > i:first-child{ color:#7A3FE4; }

.pw-recipes{ margin:.2rem 0 0; }
.pw-recipes-h{
  margin:0 0 .6rem; max-width:60ch;
  font:400 .8rem/1.5 'Inter',system-ui,sans-serif; color:var(--slate,#5A5E6B);
}

.pw-rec-row{
  display:flex; gap:.6rem; overflow-x:auto; padding:.15rem .15rem .5rem;
  scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.pw-rec-row::-webkit-scrollbar{ height:6px; }
.pw-rec-row::-webkit-scrollbar-thumb{ background:var(--line,#E6E3DA); border-radius:99px; }

.pw-rec{
  flex:0 0 auto; width:210px; scroll-snap-align:start;
  display:flex; flex-direction:column; align-items:flex-start; gap:.25rem;
  text-align:left; cursor:pointer;
  background:var(--white,#fff); border:1px solid var(--line,#E6E3DA);
  border-radius:var(--pw-r); padding:.85rem .9rem;
  transition:border-color .15s, box-shadow .15s, transform .15s;
}
.pw-rec:hover{ border-color:var(--pw-p-line,#DEDAF8); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.pw-rec:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(91,75,232,.3); }
.pw-rec.on{ border-color:var(--pw-p,#5B4BE8); box-shadow:0 0 0 2px rgba(91,75,232,.18); }

.pw-rec-ico{
  width:32px; height:32px; border-radius:9px; display:grid; place-items:center;
  background:var(--pw-p-soft,#EEEBFC); color:var(--pw-p-deep,#4536C4); font-size:1rem;
  margin-bottom:.15rem;
}
.pw-rec.on .pw-rec-ico{ background:var(--pw-grad); color:#fff; }
.pw-rec b{ font:700 .87rem 'Inter',system-ui,sans-serif; color:var(--ink,#151823); }
.pw-rec-t{
  font:400 .77rem/1.4 'Inter',system-ui,sans-serif; color:var(--slate,#5A5E6B);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.pw-rec-n{
  margin-top:.3rem; font:700 .66rem 'Space Mono',monospace; letter-spacing:.05em;
  text-transform:uppercase; color:var(--pw-d-deep,#0A6D69);
  background:var(--pw-d-soft,#E4F5F3); border-radius:100px; padding:.14rem .45rem;
}

/* =========================================================================
   THE INLINE STRIP
   Empty it is an invitation; filled it is a receipt. Two genuinely different
   layouts, because somebody who has picked six things should not still be
   reading a poster explaining what picking things is.
   ========================================================================= */
/* NO CHROME OF ITS OWN.
   ---------------------------------------------------------------------------
   This used to be a bordered, tinted, shadowed card. That was right when it
   was the body of a whole page (/pro) and had to look like something. Inside
   the fold it is the third nested box in a row — step body, fold, strip — each
   with its own border and padding, and on a 375px screen those insets add up
   to about 64px that the two doors then have to fit inside. They didn't.

   So the strip is a plain wrapper now. The fold around it is the card, the
   doors inside it are the cards, and nothing in between draws anything. */
.pw-strip{ min-width:0; }

/* NOT A MATCHED PAIR, but equal in WIDTH. Features leads on ground and
   elevation — white and raised, against live data on the page tint — which is
   a difference that holds at every width. It used to lead on width too
   (1.35fr/1fr) and that was the wrong tool: unequal tracks read as accidental
   wherever the text nearly fits, and combined with the min-width below they
   were what pushed the second door out of the strip entirely.
   See the note above TABS in power-ui.js for why they are not equal at all. */
.pw-strip-acts{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
@media(max-width:620px){ .pw-strip-acts{ grid-template-columns:1fr; } }

.pw-open{
  /* min-width:0 is load-bearing. Without it a grid item refuses to shrink
     below its content and the ellipsis on .pw-open-t span never fires. */
  min-width:0;
  display:flex; align-items:center; gap:.65rem; text-align:left; cursor:pointer;
  border:1.5px solid var(--line,#E6E3DA); background:var(--white,#fff);
  border-radius:var(--pw-r); padding:.7rem .8rem;
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.pw-open:hover{ box-shadow:var(--shadow-sm); }
.pw-open:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(91,75,232,.3); }

.pw-open-ico{
  flex:none; width:34px; height:34px; border-radius:10px;
  display:grid; place-items:center; font-size:.95rem;
}
.pw-open-t{ flex:1 1 auto; min-width:0; }
.pw-open-t b{ display:block; font:600 .88rem 'Inter',system-ui,sans-serif; color:var(--ink,#151823); }
.pw-open-t span{
  display:block; margin-top:.1rem;
  font:400 .745rem/1.35 'Inter',system-ui,sans-serif; color:var(--slate,#5A5E6B);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pw-open-plus{ flex:none; color:var(--slate,#5A5E6B); font-size:.95rem; }
.pw-open-n{
  flex:none; min-width:24px; height:24px; padding:0 .4rem; border-radius:100px;
  display:grid; place-items:center; color:#fff;
  font:700 .76rem 'Inter',system-ui,sans-serif;
}

.pw-open-power{ background:linear-gradient(180deg,#FCFBFF,var(--white,#fff)); border-color:var(--pw-p-line,#DEDAF8); }
.pw-open-power .pw-open-ico{ background:var(--pw-p-soft,#EEEBFC); color:var(--pw-p-deep,#4536C4); }
.pw-open-power:hover{ border-color:var(--pw-p,#5B4BE8); }
.pw-open-power .pw-open-n{ background:var(--pw-p,#5B4BE8); }
.pw-open-data{ background:var(--paper-2,#F3F1EB); }
.pw-open-data .pw-open-t b{ font-weight:600; }
.pw-open-data .pw-open-ico{ background:var(--pw-d-soft,#E4F5F3); color:var(--pw-d-deep,#0A6D69); }
.pw-open-data:hover{ border-color:var(--pw-d,#0E8F8A); }
.pw-open-data .pw-open-n{ background:var(--pw-d,#0E8F8A); }

/* ---- filled state ---- */
.pw-strip-bar{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  margin-bottom:.7rem;
}
.pw-strip-count{
  display:inline-flex; align-items:center; gap:.4rem;
  font:700 .8rem 'Inter',system-ui,sans-serif; color:#1F7A50;
}
.pw-strip-count i{ color:var(--ok,#2E9E6B); }
.pw-strip-clear{
  border:0; background:none; cursor:pointer; padding:.2rem .1rem;
  font:500 .78rem 'Inter',system-ui,sans-serif; color:var(--slate,#5A5E6B);
  border-bottom:1px solid transparent;
}
.pw-strip-clear:hover{ color:var(--err,#D2503B); border-bottom-color:currentColor; }

.pw-chips{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.95rem; }
.pw-chip{
  display:inline-flex; align-items:center; gap:.35rem;
  border-radius:100px; padding:.28rem .3rem .28rem .6rem;
  font:600 .79rem 'Inter',system-ui,sans-serif;
  border:1px solid transparent;
}
.pw-chip i{ font-size:.85rem; }
.pw-chip-p{ background:var(--pw-p-soft,#EEEBFC); border-color:var(--pw-p-line,#DEDAF8); color:var(--pw-p-deep,#4536C4); }
.pw-chip-s{ background:var(--pw-d-soft,#E4F5F3); border-color:var(--pw-d-line,#BFE6E2); color:var(--pw-d-deep,#0A6D69); }

.pw-chip-x{
  display:grid; place-items:center; width:19px; height:19px;
  border:0; border-radius:50%; cursor:pointer; font-size:.72rem;
  background:rgba(0,0,0,.06); color:inherit;
  transition:background .15s, color .15s;
}
.pw-chip-x:hover{ background:currentColor; color:#fff; }
.pw-chip-p .pw-chip-x:hover{ background:var(--pw-p,#5B4BE8); color:#fff; }
.pw-chip-s .pw-chip-x:hover{ background:var(--pw-d,#0E8F8A); color:#fff; }

.pw-strip.is-on .pw-open{ padding:.6rem .7rem; }
.pw-strip.is-on .pw-open-ico{ width:32px; height:32px; font-size:.95rem; border-radius:9px; }
.pw-strip.is-on .pw-open-t span{ display:none; }

/* =========================================================================
   THE PICKER MODAL
   z-index 700: it opens from INSIDE the editor's builder overlay (500) and
   above the copy-guide modal (600), so anything lower renders behind the
   thing that opened it.
   ========================================================================= */
.pw-overlay{
  position:fixed; inset:0; z-index:700;
  background:rgba(21,24,35,.55); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
@media(max-width:720px){ .pw-overlay{ padding:0; align-items:stretch; } }

.pw-modal{
  display:flex; flex-direction:column;
  width:min(880px,100%); max-height:min(760px,92vh);
  background:var(--paper,#FBFAF7); color:var(--ink,#151823);
  border-radius:var(--r-lg,22px); box-shadow:var(--shadow-lg);
  overflow:hidden;
  animation:pwIn .22s cubic-bezier(.2,.8,.3,1);
}
@media(max-width:720px){
  .pw-modal{ max-height:100dvh; height:100dvh; border-radius:0; width:100%; }
}
@keyframes pwIn{ from{ opacity:0; transform:translateY(10px) scale(.985);} to{ opacity:1; transform:none; } }
@media(prefers-reduced-motion:reduce){ .pw-modal{ animation:none; } }

.pw-mhead{
  flex:none; display:flex; align-items:center; gap:.75rem;
  padding:.85rem 1rem; background:var(--white,#fff);
  border-bottom:1px solid var(--line,#E6E3DA);
}
.pw-tabs{
  display:flex; gap:.15rem; background:var(--paper-2,#F3F1EB);
  padding:.24rem; border-radius:100px;
}
.pw-tabs button{
  display:inline-flex; align-items:center; gap:.45rem;
  border:0; background:transparent; border-radius:100px; cursor:pointer;
  padding:.5rem .9rem; white-space:nowrap;
  font:600 .85rem 'Inter',system-ui,sans-serif; color:var(--slate,#5A5E6B);
  transition:background .15s, color .15s;
}
.pw-tabs button:hover{ color:var(--ink,#151823); }
.pw-tabs button.on{ background:var(--white,#fff); box-shadow:var(--shadow-sm); }
.pw-tabs button[data-pw-tab="power"].on{ color:var(--pw-p,#5B4BE8); }
.pw-tabs button[data-pw-tab="data"].on{ color:var(--pw-d-deep,#0A6D69); }
.pw-tabn{
  font-style:normal; min-width:19px; height:19px; padding:0 .32rem;
  border-radius:100px; display:grid; place-items:center;
  font:700 .68rem 'Inter',system-ui,sans-serif; color:#fff; background:var(--slate,#5A5E6B);
}
.pw-tabs button[data-pw-tab="power"] .pw-tabn{ background:var(--pw-p,#5B4BE8); }
.pw-tabs button[data-pw-tab="data"] .pw-tabn{ background:var(--pw-d,#0E8F8A); }

.pw-x{
  margin-left:auto; flex:none; width:34px; height:34px; border-radius:50%;
  border:0; background:transparent; cursor:pointer; color:var(--slate,#5A5E6B);
  display:grid; place-items:center; font-size:.95rem;
  transition:background .15s, color .15s;
}
.pw-x:hover{ background:var(--paper-2,#F3F1EB); color:var(--ink,#151823); }


.pw-tools{ flex:none; padding:.9rem 1.25rem .7rem; }
.pw-search{
  display:flex; align-items:center; gap:.55rem;
  border:1px solid var(--line,#E6E3DA); border-radius:12px;
  padding:.62rem .85rem; background:var(--white,#fff);
  transition:border-color .15s, box-shadow .15s;
}
.pw-search:focus-within{ border-color:var(--pw-p,#5B4BE8); box-shadow:0 0 0 3px rgba(91,75,232,.14); }
.pw-search > i{ color:var(--slate,#5A5E6B); }
.pw-search input{
  flex:1 1 auto; border:0; outline:0; background:transparent; min-width:0;
  font:400 .92rem 'Inter',system-ui,sans-serif; color:var(--ink,#151823);
}
.pw-search input::-webkit-search-cancel-button{ display:none; }
.pw-search-x{
  flex:none; width:22px; height:22px; border:0; border-radius:50%; cursor:pointer;
  background:var(--paper-2,#F3F1EB); color:var(--slate,#5A5E6B);
  display:grid; place-items:center; font-size:.68rem;
}
.pw-search-x:hover{ background:var(--pw-p,#5B4BE8); color:#fff; }

.pw-cats{ display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.65rem; }
.pw-cats button{
  border:1px solid var(--line,#E6E3DA); background:var(--white,#fff);
  border-radius:100px; padding:.3rem .7rem; cursor:pointer;
  font:500 .77rem 'Inter',system-ui,sans-serif; color:var(--slate,#5A5E6B);
  transition:background .15s, color .15s, border-color .15s;
}
.pw-cats button:hover{ color:var(--ink,#151823); border-color:#C9C6E8; }
.pw-cats button.on{ background:var(--ink,#151823); border-color:var(--ink,#151823); color:#fff; }

/* ---- the list ---- */
.pw-list{
  flex:1 1 auto; min-height:0; overflow-y:auto; outline:none;
  padding:.35rem 1.25rem 1.25rem;
  display:grid; grid-template-columns:1fr 1fr; gap:.6rem; align-content:start;
}
@media(max-width:760px){ .pw-list{ grid-template-columns:1fr; } }

.pw-card{
  position:relative; display:flex; gap:.75rem; align-items:flex-start;
  text-align:left; cursor:pointer;
  background:var(--white,#fff); border:1.5px solid var(--line,#E6E3DA);
  border-radius:var(--pw-r); padding:.85rem .9rem;
  transition:border-color .14s, box-shadow .14s, background .14s;
}
.pw-card:hover{ border-color:#C9C6E8; box-shadow:var(--shadow-sm); }
.pw-card:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(91,75,232,.3); }
.pw-card.on{ border-color:var(--pw-p,#5B4BE8); background:#FAF9FF; }

.pw-card-ico{
  flex:none; width:38px; height:38px; border-radius:11px;
  display:grid; place-items:center; font-size:1.05rem;
  background:var(--paper-2,#F3F1EB); color:var(--slate,#5A5E6B);
  transition:background .14s, color .14s;
}
.pw-card.on .pw-card-ico{ background:var(--pw-p,#5B4BE8); color:#fff; }

/* Two lines: what it is, and what it does. The version number, the "where
   you'd use it" line and the See-details fold all went — they were the four
   quietest things on a card whose only job is one yes-or-no. See cardHtml in
   power-ui.js for where that information went instead (the prompt). */
.pw-card-body{ flex:1 1 auto; min-width:0; padding-right:1.4rem; }
.pw-card-body > b{ font:700 .9rem 'Inter',system-ui,sans-serif; color:var(--ink,#151823); }
.pw-card-blurb{
  display:block; margin-top:.15rem;
  font:400 .79rem/1.45 'Inter',system-ui,sans-serif; color:var(--slate,#5A5E6B);
}

.pw-card-tick{
  position:absolute; top:.75rem; right:.75rem;
  width:22px; height:22px; border-radius:7px; flex:none;
  display:grid; place-items:center; font-size:.75rem;
  border:1.5px solid var(--line,#E6E3DA); background:var(--white,#fff);
  color:transparent; transition:background .14s, border-color .14s, color .14s;
}
.pw-card:hover .pw-card-tick{ border-color:#C9C6E8; }
.pw-card.on .pw-card-tick{ background:var(--pw-p,#5B4BE8); border-color:var(--pw-p,#5B4BE8); color:#fff; }

/* Live-data cards go teal. Scoped off a class the picker stamps on the modal
   (see paintChrome) so ONE card component serves both lists, rather than two
   near-identical ones drifting apart. */
.pw-modal.tab-data .pw-card.on{ border-color:var(--pw-d,#0E8F8A); background:#F4FBFA; }
.pw-modal.tab-data .pw-card.on .pw-card-ico,
.pw-modal.tab-data .pw-card.on .pw-card-tick{
  background:var(--pw-d,#0E8F8A); border-color:var(--pw-d,#0E8F8A); color:#fff;
}

.pw-empty{
  grid-column:1 / -1; text-align:center; padding:3rem 1rem;
  color:var(--slate,#5A5E6B);
}
.pw-empty i{ font-size:1.6rem; opacity:.45; }
.pw-empty p{ margin-top:.6rem; font:400 .88rem/1.55 'Inter',system-ui,sans-serif; max-width:44ch; margin-inline:auto; }

.pw-mfoot{
  flex:none; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.85rem 1.25rem; background:var(--white,#fff);
  border-top:1px solid var(--line,#E6E3DA);
  padding-bottom:calc(.85rem + env(safe-area-inset-bottom,0px));
}
.pw-foot-n{
  display:inline-flex; align-items:center; gap:.4rem; min-width:0;
  font:400 .84rem 'Inter',system-ui,sans-serif; color:var(--slate,#5A5E6B);
}
.pw-foot-n.on{ color:#1F7A50; }
.pw-foot-n i{ color:var(--ok,#2E9E6B); }
.pw-foot-n b{ font-weight:700; }

/* =========================================================================
   /power — the bits below the picker
   ========================================================================= */
.pw-note{
  display:flex; align-items:flex-start; gap:.55rem; margin-top:.85rem;
  background:var(--pw-p-soft,#EEEBFC); border:1px solid var(--pw-p-line,#DEDAF8);
  border-radius:12px; padding:.7rem .85rem;
  font:400 .82rem/1.5 'Inter',system-ui,sans-serif; color:var(--pw-p-deep,#4536C4);
}
.pw-note i{ flex:none; margin-top:.12rem; }
.pw-note b{ font-weight:700; }

.pw-after{
  display:flex; align-items:flex-start; gap:.6rem; margin-top:1.1rem;
  background:var(--paper-2,#F3F1EB); border:1px solid var(--line,#E6E3DA);
  border-radius:14px; padding:.85rem .95rem;
}
.pw-after i{ flex:none; margin-top:.15rem; color:var(--pw-d-deep,#0A6D69); }
.pw-after b{ display:block; font:700 .85rem 'Inter',system-ui,sans-serif; color:var(--ink,#151823); }
.pw-after span{ display:block; margin-top:.15rem; font:400 .8rem/1.5 'Inter',system-ui,sans-serif; color:var(--slate,#5A5E6B); }

/* =========================================================================
   THE EDITOR PANEL  (.pwe-*)
   Injected into the AI builder's flow by power-editor.js. It has to read as
   part of that rail rather than as something bolted on, so it borrows the
   step's own spacing and only the left edge marks it as different.
   ========================================================================= */
.pwe{
  margin-top:1.15rem; border-radius:var(--r-lg,20px);
  border:1px solid var(--pw-p-line,#DEDAF8);
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(91,75,232,.06), transparent 58%),
    var(--white,#fff);
  overflow:hidden;
}
.pwe-h{
  display:flex; align-items:center; gap:.65rem;
  padding:.85rem 1rem; border-bottom:1px solid var(--pw-p-line,#DEDAF8);
}
.pwe-h-ico{
  flex:none; width:34px; height:34px; border-radius:10px;
  display:grid; place-items:center; font-size:.95rem;
  background:var(--pw-grad); color:#fff;
}
.pwe-h-t{ flex:1 1 auto; min-width:0; }
.pwe-h-t b{ display:block; font:700 .9rem 'Inter',system-ui,sans-serif; color:var(--ink,#151823); }
.pwe-h-t span{ display:block; margin-top:.1rem; font:400 .78rem/1.4 'Inter',system-ui,sans-serif; color:var(--slate,#5A5E6B); }
.pwe-free{
  flex:none; font:700 .64rem 'Space Mono',monospace; letter-spacing:.08em; text-transform:uppercase;
  background:#E3F6EC; color:#1F7A50; border-radius:100px; padding:.18rem .5rem;
}
.pwe-b{ padding:1rem; }
.pwe .pw-strip{ border:0; padding:0; box-shadow:none; background:none; }
.pwe .pw-strip.is-empty{ background:none; }

/* The "these are already in your page" line. It is the whole reason the panel
   is worth having on an edit prompt — without it the next round trip hands
   back a page with the chart rebuilt from scratch, or silently deleted. */
.pwe-keep{
  display:flex; align-items:flex-start; gap:.5rem; margin-top:.85rem;
  border-top:1px dashed var(--line,#E6E3DA); padding-top:.8rem;
  font:400 .79rem/1.5 'Inter',system-ui,sans-serif; color:var(--slate,#5A5E6B);
}
.pwe-keep i{ flex:none; margin-top:.15rem; color:var(--ok,#2E9E6B); }
.pwe-keep b{ color:var(--ink,#151823); font-weight:700; }

/* =========================================================================
   MOTION
   ========================================================================= */
@media(prefers-reduced-motion:reduce){
  .pw-rec, .pw-open, .pw-card{ transition:none; }
  .pw-rec:hover, .pw-open:hover{ transform:none; }
}

/* =========================================================================
   THE INTRO MODAL
   Rides on prompt.css's .hm-modal shell (same card, same overlay, same fade
   as the copy guide), so this is only what goes inside it. Three cards, one
   per thing that is genuinely different about Pro Mode, colour-coded to the
   same teal/indigo system the picker uses: teal for what comes from outside,
   indigo for what the page can now do.
   ========================================================================= */
/* .hm-modal-wide caps at 500px. Three cards need more, so the intro asks for
   its own width via openModal's `cls` hook rather than widening every modal
   that shares the shell. */
.hm-modal.pw-modal-intro{ max-width:min(790px, calc(100vw - 32px)); }

.pw-intro-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem;
  margin-top:1.25rem;
}
@media(max-width:700px){ .pw-intro-grid{ grid-template-columns:1fr; } }

.pw-intro-card{
  background:var(--white,#fff); border:1px solid var(--line,#E6E3DA);
  border-radius:var(--pw-r); padding:.95rem;
}
.pw-intro-card b{
  display:block; margin-top:.55rem;
  font:700 .88rem 'Inter',system-ui,sans-serif; color:var(--ink,#151823);
}
/* The description. A <p>, NOT a span — .pw-intro-ico is a span too, and a
   `.pw-intro-card span` rule sets `font:` (a shorthand that resets
   font-family), which stripped the icon font off the glyph inside it and left
   three empty coloured squares. */
.pw-intro-card p{
  margin-top:.25rem;
  font:400 .79rem/1.5 'Inter',system-ui,sans-serif; color:var(--slate,#5A5E6B);
}

.pw-intro-ico{
  width:34px; height:34px; border-radius:10px;
  display:grid; place-items:center; font-size:.95rem; color:#fff;
}
.pw-intro-ico-d{ background:var(--pw-d,#0E8F8A); }
.pw-intro-ico-p{ background:var(--pw-p,#5B4BE8); }
.pw-intro-ico-g{ background:linear-gradient(135deg,#7A3FE4,#0EA5A4); }

.pw-intro-foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap; margin-top:1.3rem;
}
.pw-intro-foot .btn{ flex:0 0 auto; }
/* .hm-modal-quiet centres itself and takes full width in home.css's own use
   of it. Here it is one of two things on a row, so it stops doing that. */
.pw-intro-foot .hm-modal-quiet.pw-intro-never{
  width:auto; margin:0; flex:0 0 auto;
}
.pw-intro-quiet{
  font:400 .8rem 'Inter',system-ui,sans-serif; color:var(--slate,#5A5E6B);
}


/* =========================================================================
   THE OPTIONAL STEP, AND ITS SWITCH
   -------------------------------------------------------------------------
   One step in the rail is not like the others: it can be skipped with nothing
   lost. So it is the only one drawn grey, and it stays grey until the switch
   is on. That is the whole message — this is not something you have missed.

   Which means the "off" state has to look deliberate rather than disabled.
   Muted, not faded to nothing: the heading is still readable, the switch is
   still obviously a control, and the border is still there. A step somebody
   cannot read is a step they will stop to worry about, which is exactly the
   hesitation this is trying to remove.
   ========================================================================= */
.pb-step-opt .pb-n-opt{
  display:grid; place-items:center; font-size:.82rem;
  transition:background .2s, color .2s, border-color .2s;
}
/* renderStepDone() marks optional steps done — they can never block anybody —
   and .pb-step.done draws a white check in a ::after over the circle. On a
   numbered step that replaces the number; here it landed on top of the +.
   There is nothing to complete in an optional step, so it keeps its own two
   states and refuses the third. */
.pb-step.done .pb-n-opt::after{ content:none !important; }
.pb-step.done .pb-n-opt{ color:inherit; }
.pb-step-opt.is-off .pb-n-opt{
  background:var(--paper-2,#F3F1EB); color:var(--slate,#5A5E6B);
  border-color:var(--line,#E6E3DA); box-shadow:none;
}
.pb-step-opt.is-on .pb-n-opt{
  background:var(--pw-p,#5B4BE8); color:#fff; border-color:var(--pw-p,#5B4BE8);
}
.pb-step-opt.is-off .pb-step-h h2{ color:var(--slate,#5A5E6B); }
.pb-step-opt.is-off .pb-step-h p{ opacity:.8; }

.pw-fold{
  border:1.5px solid var(--line,#E6E3DA); border-radius:var(--pw-r);
  background:var(--paper-2,#F3F1EB);
  transition:border-color .18s, background .18s, box-shadow .18s;
}
.pw-fold.is-on{
  border-color:var(--pw-p-line,#DEDAF8); background:var(--white,#fff);
  box-shadow:var(--shadow-sm);
}
.pw-fold-bar{
  display:flex; align-items:center; gap:.9rem; width:100%; text-align:left;
  background:none; border:0; cursor:pointer; padding:.85rem .95rem;
  font-family:inherit;
}
.pw-fold-bar:focus-visible{ outline:2px solid var(--pw-p,#5B4BE8); outline-offset:2px; border-radius:var(--pw-r); }
.pw-fold-t{ flex:1 1 auto; min-width:0; }
.pw-fold-t b{
  display:block; font:600 .88rem/1.25 'Inter',system-ui,sans-serif;
  color:var(--ink,#151823);
}
.pw-fold-t span{
  display:block; margin-top:.1rem;
  font:400 .77rem/1.4 'Inter',system-ui,sans-serif; color:var(--slate,#5A5E6B);
}

/* The switch itself. Its own rules rather than .pb-toggle's, because that one
   puts the track FIRST — it is a row of settings toggles where the tracks have
   to line up down the left. Here there is one, at the end of a wide bar, and
   the thing that has to line up is the right-hand edge. */
.pw-fold-sw{
  position:relative; flex:none; width:42px; height:24px; border-radius:999px;
  background:#D8D8E4; transition:background .18s;
}
.pw-fold.is-on .pw-fold-sw{ background:var(--pw-p,#5B4BE8); }
.pw-fold-thumb{
  position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.22);
  transition:transform .18s;
}
.pw-fold.is-on .pw-fold-thumb{ transform:translateX(18px); }

.pw-fold-b{ padding:0 .95rem .95rem; }
@media(max-width:560px){
  .pw-fold-bar{ padding:.75rem .8rem; }
  .pw-fold-b{ padding:0 .7rem .7rem; }
  .pw-open{ padding:.65rem .7rem; }
}

.pw-fold-load{
  display:flex; align-items:center; gap:.5rem; padding:.9rem .2rem;
  font:500 .8rem 'Inter',system-ui,sans-serif; color:var(--slate,#5A5E6B);
}
.pw-fold-load i{ animation:pw-spin 1s linear infinite; }
.pw-fold-load.is-err{ color:#B4232A; }
.pw-fold-load.is-err i{ animation:none; }
@keyframes pw-spin{ to{ transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce){
  .pw-fold-load i{ animation:none; }
  .pw-fold-sw, .pw-fold-thumb, .pb-step-opt .pb-n-opt{ transition:none; }
}

/* =========================================================================
   WHICH AI — the two we recommend, and the one we don't un-recommend
   -------------------------------------------------------------------------
   See static/js/ais.js for why these are no longer three equal pills. The
   badge is small on purpose: enough to steer a first choice, not enough to
   read as "you brought the wrong AI" to somebody who only has ChatGPT.
   ========================================================================= */



/* =========================================================================
   THE MODAL'S FOOTER
   -------------------------------------------------------------------------
   Done was a .btn-sm: a small pale button in the corner of a full-screen
   sheet, which on a phone is the only way out and was the least visible thing
   on it. Nothing is submitted by pressing it — every tick has already taken
   effect — but it still has to look like the way out, because that is what
   people go looking for.
   ========================================================================= */
.pw-mfoot .btn{
  flex:none; display:inline-flex; align-items:center; gap:.4rem;
  padding:.6rem 1.3rem; border:0; border-radius:11px; cursor:pointer;
  font:700 .87rem 'Inter',system-ui,sans-serif; color:#fff;
  background:var(--pw-p,#5B4BE8);
  box-shadow:0 2px 8px rgba(91,75,232,.28);
  transition:background .15s, box-shadow .15s, transform .15s;
}
.pw-mfoot .btn:hover{
  background:var(--pw-p-deep,#4536C4);
  box-shadow:0 4px 14px rgba(91,75,232,.34);
  transform:translateY(-1px);
}
.pw-mfoot .btn:active{ transform:translateY(0); }
.pw-mfoot .btn:focus-visible{ outline:2px solid var(--pw-p-deep,#4536C4); outline-offset:3px; }
.pw-mfoot .btn i{ font-size:.9rem; }

/* Live data is teal everywhere else in this modal; the way out should be too. */
.pw-modal.tab-data .pw-mfoot .btn{
  background:var(--pw-d,#0E8F8A); box-shadow:0 2px 8px rgba(14,143,138,.28);
}
.pw-modal.tab-data .pw-mfoot .btn:hover{
  background:var(--pw-d-deep,#0A6D69); box-shadow:0 4px 14px rgba(14,143,138,.34);
}

@media(max-width:560px){
  .pw-mfoot{ gap:.6rem; }
  .pw-mfoot .btn{ padding:.65rem 1.1rem; }
}
@media(prefers-reduced-motion:reduce){
  .pw-mfoot .btn{ transition:none; }
  .pw-mfoot .btn:hover{ transform:none; }
}