/* ══════════════════════════════════════════════════════════════
   hostna — AI Website Builder app (/builder/)

   The page runs outside the OS window, so it carries its own sheet —
   but not its own design language. The tokens below are the ones from
   os.css (same names, same values, both themes) so the builder is the
   desktop's own colour, glass and shadow without loading a 217 KB
   stylesheet it would use forty rules of.

   Theme: html[data-theme] is stamped by the boot script in
   template-parts/builder-app.php, which reads the same two localStorage
   keys the OS writes ('hostna-os-theme', then the billing panel's
   'hostna-theme'). Nothing here may hard-code a light-only colour —
   that was the old sheet's fault and the reason the page glared white
   under a customer who had chosen the dark desktop.

   Everything is prefixed bd-.
   ══════════════════════════════════════════════════════════════ */

/* ── 1. tokens ──────────────────────────────────────────────── */
:root{
  --r:14px;--r-lg:20px;--r-win:26px;--r-ctl:13px;
  --blur:14px;
  /* every filled action button, whatever the theme — the lilac end of
     the cloud mark's gradient, pulled deep enough for white type */
  --btn:#8250f0;--btn-2:#a855f7;
  --go:#c9f542;--warn:#ffb347;--ok:#c9f542;--bad:#ff6b81;
  --ease:cubic-bezier(.22,.8,.28,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --font:'Inter',-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI Variable Text","Segoe UI",system-ui,sans-serif;
}
html[data-theme="dark"]{
  color-scheme:dark;
  --bg-base:#05070d;
  --ink:#eef2f8;
  --ink-2:rgba(238,242,248,.72);
  --ink-3:rgba(238,242,248,.46);
  --stroke:rgba(255,255,255,.14);
  --stroke-2:rgba(255,255,255,.07);
  --glass-a:rgba(255,255,255,.11);
  --glass-b:rgba(255,255,255,.035);
  --tile:rgba(255,255,255,.055);
  --tile-2:rgba(255,255,255,.09);
  --tile-hover:rgba(255,255,255,.085);
  --sunk:rgba(6,9,16,.42);
  --spec:rgba(255,255,255,.5);
  --shadow-win:0 46px 90px -34px rgba(0,0,0,.85),0 4px 16px rgba(0,0,0,.35);
  --shadow-pop:0 22px 48px -18px rgba(0,0,0,.7);
  --w1:#2a3ea8;--w2:#7d2f9e;--w3:#0e6f8c;--w4:#132049;
  --accent:#5aa9ff;
  --field:rgba(6,9,16,.42);
}
html[data-theme="light"]{
  color-scheme:light;
  --bg-base:#e9e4dc;
  --ink:#15181f;
  --ink-2:rgba(21,24,31,.66);
  --ink-3:rgba(21,24,31,.42);
  --stroke:rgba(255,255,255,.8);
  --stroke-2:rgba(24,28,38,.07);
  --glass-a:rgba(255,255,255,.66);
  --glass-b:rgba(255,255,255,.34);
  --tile:rgba(255,255,255,.5);
  --tile-2:rgba(255,255,255,.72);
  --tile-hover:rgba(255,255,255,.74);
  --sunk:rgba(255,255,255,.42);
  --spec:rgba(255,255,255,.95);
  --shadow-win:0 40px 80px -34px rgba(60,50,45,.42),0 3px 12px rgba(60,50,45,.1);
  --shadow-pop:0 20px 44px -18px rgba(60,50,45,.32);
  --w1:#ffd9b8;--w2:#c9d8ff;--w3:#ffc9d6;--w4:#f6ede2;
  --accent:#2f7fe0;
  --ok:#4a7f12;--warn:#b9761f;--bad:#c8324f;
  --field:rgba(255,255,255,.72);
}

/* ── 2. reset ───────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
html{-webkit-text-size-adjust:100%}
body{
  font:400 14px/1.55 var(--font);
  color:var(--ink);background:var(--bg-base);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  /* clip, not hidden: hidden would make the body a scroll container. On a
     phone a single overflowing decoration widens the LAYOUT viewport, and
     every position:fixed element then lays out against that wider box with
     its right edge off the screen — which is how the composer sheet ended
     up cut in half. Nothing on this page may widen the document. */
  overflow-x:clip;
}
a{color:var(--accent);text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit;background:none;border:0;outline:0}
button{cursor:pointer}
/* the blanket reset above strips a radio down to nothing; these two want
   the platform control, in the brand colour, in both themes */
input[type="radio"],input[type="checkbox"]{appearance:auto;-webkit-appearance:auto;accent-color:var(--btn);width:15px;height:15px;cursor:pointer;flex:0 0 auto}
.bd-chipbox input[type="radio"],.bd-chipbox input[type="checkbox"]{display:none}
h1,h2,h3,h4{line-height:1.2;letter-spacing:-.015em;font-weight:640}
svg{display:block}
[hidden]{display:none!important}
::selection{background:color-mix(in srgb,var(--btn) 38%,transparent)}

/* ── 3. wallpaper ───────────────────────────────────────────── */
/* the desktop's own drifting washes: the builder is a Hostna surface,
   not a white page with a logo on it. clip, not hidden — an
   overflow:hidden box is still a scroll container script can shift. */
.bd-desk{position:fixed;inset:-10%;z-index:0;overflow:hidden;overflow:clip;pointer-events:none}
.bd-desk b{position:absolute;display:block;border-radius:50%;filter:blur(62px);opacity:.7;will-change:transform}
html[data-theme="light"] .bd-desk b{filter:blur(76px);opacity:.85}
/* On the desktop the wallpaper is mostly hidden behind an opaque window.
   Here the whole viewport is wallpaper, so without this the washes fight
   the prompt for attention and the top bar loses its contrast. The scrim
   keeps the colour at the edges and hands the middle back to the page. */
.bd-desk::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(115% 88% at 50% 42%,
    color-mix(in srgb,var(--bg-base) 86%,transparent) 0%,
    color-mix(in srgb,var(--bg-base) 60%,transparent) 42%,
    color-mix(in srgb,var(--bg-base) 12%,transparent) 100%)}
.bd-desk .b1{width:52vw;height:52vw;left:-8vw;top:-14vw;background:var(--w1);animation:bdDrift1 34s ease-in-out infinite alternate}
.bd-desk .b2{width:46vw;height:46vw;right:-6vw;top:-10vw;background:var(--w2);animation:bdDrift2 41s ease-in-out infinite alternate}
.bd-desk .b3{width:44vw;height:44vw;right:6vw;bottom:-18vw;background:var(--w3);animation:bdDrift3 37s ease-in-out infinite alternate}
.bd-desk .b4{width:60vw;height:40vw;left:10vw;bottom:-22vw;background:var(--w4);animation:bdDrift1 45s ease-in-out infinite alternate-reverse}
@media (max-aspect-ratio:1/1){
  .bd-desk .b1{width:96vw;height:96vw;left:-28vw;top:-24vw}
  .bd-desk .b2{width:88vw;height:88vw;right:-26vw;top:2vh}
  .bd-desk .b3{width:86vw;height:86vw;right:-14vw;bottom:6vh}
  .bd-desk .b4{width:110vw;height:70vw;left:-16vw;bottom:-14vh}
}
@keyframes bdDrift1{to{transform:translate3d(6vw,4vw,0)}}
@keyframes bdDrift2{to{transform:translate3d(-7vw,5vw,0)}}
@keyframes bdDrift3{to{transform:translate3d(-5vw,-6vw,0)}}

.bd{position:relative;z-index:1;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.bd-boot{flex:1;display:grid;place-items:center;padding:40px}
.bd-boot-card{text-align:center;color:var(--ink-2)}
.bd-logo{font-weight:800;font-size:18px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}

/* ── 4. top bar ─────────────────────────────────────────────── */
.bd-top{position:sticky;top:0;z-index:30;display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;padding:10px 18px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--bg-base) 74%,transparent),color-mix(in srgb,var(--bg-base) 56%,transparent));
  -webkit-backdrop-filter:blur(var(--blur)) saturate(180%);backdrop-filter:blur(var(--blur)) saturate(180%);
  border-bottom:1px solid var(--stroke-2);box-shadow:inset 0 1px 0 var(--spec)}
.bd-top .bd-logo{font-size:15px;display:inline-flex;align-items:baseline}
.bd-top .bd-logo small{font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--ink-3);margin-left:8px;font-size:11.5px}
.bd-nav{display:flex;gap:3px;margin-left:8px}
.bd-nav a,.bd-nav button{padding:7px 13px;border-radius:999px;border:1px solid transparent;color:var(--ink-3);font-weight:560;font-size:12.5px;transition:.2s}
.bd-nav a:hover,.bd-nav button:hover{color:var(--ink);background:var(--tile)}
.bd-nav a.on,.bd-nav button.on{background:var(--tile-2);border-color:var(--stroke);color:var(--ink);box-shadow:inset 0 1px 0 var(--spec)}
.bd-right{margin-left:auto;display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:8px 9px;min-width:0}
.bd-chip{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;background:var(--tile);border:1px solid var(--stroke-2);font-size:12px;color:var(--ink-2);white-space:nowrap}
.bd-chip b{color:var(--ink);font-size:13.5px}
.bd-user{font-size:12px;color:var(--ink-3);max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bd-iconbtn{width:32px;height:32px;border-radius:10px;display:inline-grid;place-items:center;font-size:14px;line-height:1;
  color:var(--ink-2);background:var(--tile);border:1px solid var(--stroke-2);transition:.2s;flex:0 0 auto}
.bd-iconbtn:hover{background:var(--tile-hover);color:var(--ink);transform:translateY(-1px)}

/* ── 5. buttons ─────────────────────────────────────────────── */
.bd-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 16px;border-radius:11px;border:1px solid transparent;
  font-weight:560;font-size:13px;letter-spacing:-.005em;white-space:nowrap;
  transition:transform .18s var(--ease),box-shadow .22s,filter .2s,background .2s}
.bd-btn.prime{color:#fff;
  background:linear-gradient(180deg,color-mix(in srgb,var(--btn) 88%,#fff 12%),color-mix(in srgb,var(--btn) 78%,#000 22%));
  box-shadow:0 8px 20px -10px color-mix(in srgb,var(--btn) 85%,transparent),inset 0 1px 0 rgba(255,255,255,.42)}
.bd-btn.prime:hover{transform:translateY(-1.5px);filter:brightness(1.06);box-shadow:0 14px 28px -12px color-mix(in srgb,var(--btn) 90%,transparent),inset 0 1px 0 rgba(255,255,255,.5)}
.bd-btn.ghost{color:var(--ink);background:var(--tile-2);border-color:var(--stroke);box-shadow:inset 0 1px 0 var(--spec)}
.bd-btn.ghost:hover{transform:translateY(-1.5px);background:var(--tile-hover)}
.bd-btn.danger{color:var(--bad);background:color-mix(in srgb,var(--bad) 12%,transparent);border-color:color-mix(in srgb,var(--bad) 34%,transparent)}
.bd-btn.danger:hover{background:color-mix(in srgb,var(--bad) 18%,transparent)}
.bd-btn:active{transform:translateY(0) scale(.985)}
.bd-btn.sm{padding:6px 12px;font-size:12px;border-radius:9px}
.bd-btn.lg{padding:0 20px;height:44px;font-size:14px;border-radius:13px}
.bd-btn:disabled{opacity:.45;cursor:not-allowed;transform:none;filter:none}
.bd-link{background:none;border:0;padding:0;color:var(--accent);font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:2px}

/* ── 6. layout + cards ──────────────────────────────────────── */
.bd-main{flex:1;display:flex;flex-direction:column;min-height:0}
.bd-wrap{width:100%;max-width:1180px;margin:0 auto;padding:22px 18px 44px}
.bd-grid2{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:14px;align-items:start}
.bd-card{position:relative;padding:18px 20px;border-radius:var(--r-lg);min-width:0;
  display:flex;flex-direction:column;gap:11px;
  background:linear-gradient(155deg,var(--glass-a),var(--glass-b));
  -webkit-backdrop-filter:blur(var(--blur)) saturate(180%);backdrop-filter:blur(var(--blur)) saturate(180%);
  border:1px solid var(--stroke);box-shadow:var(--shadow-win),inset 0 1px 0 var(--spec)}
.bd-card h2{font-size:17px}
.bd-card h3{font-size:14.5px}
.bd-eyebrow{display:block;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.bd-note{font-size:12.5px;color:var(--ink-3);line-height:1.6}
.bd-note b{color:var(--ink-2)}
.bd-warn{font-size:12.5px;line-height:1.6;padding:10px 12px;border-radius:12px;color:var(--ink-2);
  background:color-mix(in srgb,var(--warn) 14%,transparent);border:1px solid color-mix(in srgb,var(--warn) 34%,transparent)}
.bd-warn b{color:var(--ink)}
.bd-flash{font-size:12.5px;min-height:1.2em;color:var(--ink-3)}
.bd-flash.ok{color:var(--ok)}.bd-flash.err{color:var(--bad)}
.bd-empty{padding:34px 20px;text-align:center;color:var(--ink-2);border-radius:var(--r-lg);
  background:var(--tile);border:1px dashed var(--stroke);box-shadow:inset 0 1px 0 var(--spec)}
.bd-empty b{display:block;color:var(--ink);font-size:15px;margin-bottom:6px}
.bd-acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.bd-pill{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:999px;
  border:1px solid var(--stroke-2);background:var(--tile);color:var(--ink-3);vertical-align:middle}
.bd-pill.live{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 42%,transparent);background:color-mix(in srgb,var(--ok) 14%,transparent)}
.bd-pill.warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 42%,transparent);background:color-mix(in srgb,var(--warn) 14%,transparent)}
.bd-pill.bad{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 42%,transparent);background:color-mix(in srgb,var(--bad) 14%,transparent)}
.bd-pill.info{color:var(--btn-2);border-color:color-mix(in srgb,var(--btn) 42%,transparent);background:color-mix(in srgb,var(--btn) 14%,transparent)}
html[data-theme="light"] .bd-pill.info{color:var(--btn)}

/* ── 7. forms ───────────────────────────────────────────────── */
.bd-field{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--ink-2);font-weight:600}
.bd-field em{font-weight:500;color:var(--ink-3);font-style:normal}
.bd-field input,.bd-field select,.bd-field textarea{width:100%;font-size:13.5px;font-weight:400;color:var(--ink);
  background:var(--field);border:1px solid var(--stroke-2);border-radius:11px;padding:9px 11px;
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--spec) 40%,transparent);transition:border-color .2s,box-shadow .2s}
.bd-field input::placeholder,.bd-field textarea::placeholder{color:var(--ink-3)}
.bd-field select{appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.75 6 6.25l4.5-4.5' fill='none' stroke='%238a90a0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;background-size:11px;padding-right:30px}
.bd-field option{background:var(--bg-base);color:var(--ink)}
.bd-field textarea{min-height:96px;resize:vertical}
.bd-field input[type="color"]{padding:4px;height:38px;cursor:pointer}
.bd-field input:focus,.bd-field textarea:focus,.bd-field select:focus{
  border-color:color-mix(in srgb,var(--btn) 55%,transparent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--btn) 16%,transparent)}
.bd-chips{display:flex;flex-wrap:wrap;gap:6px}
.bd-chipbox{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;padding:6px 12px;border-radius:999px;
  border:1px solid var(--stroke-2);background:var(--tile);color:var(--ink-2);cursor:pointer;user-select:none;font-weight:500;transition:.2s}
.bd-chipbox:hover{background:var(--tile-hover);color:var(--ink);transform:translateY(-1px)}
.bd-chipbox.on{color:var(--ink);border-color:color-mix(in srgb,var(--btn) 55%,transparent);
  background:color-mix(in srgb,var(--btn) 16%,transparent);box-shadow:inset 0 1px 0 var(--spec)}
.bd-chipbox input{display:none}
.bd-steps{display:flex;flex-direction:column;gap:7px}
.bd-step{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:13px;font-size:12.5px;
  color:var(--ink-3);background:var(--tile);border:1px solid var(--stroke-2);opacity:.45;transition:.35s}
.bd-step.on{opacity:1;color:var(--ink)}
.bd-step.done{opacity:1;color:var(--ink-2)}
.bd-step i{width:16px;height:16px;border-radius:50%;border:1.5px solid currentColor;flex:0 0 auto;position:relative}
.bd-step.on i{border-color:var(--btn-2);border-top-color:transparent;animation:bdspin .8s linear infinite}
.bd-step.done i{border-color:var(--ok);background:var(--ok)}
@keyframes bdspin{to{transform:rotate(360deg)}}

/* ── 8. the composer — one prompt, nothing around it ─────────── */
/* The page a signed-in customer lands on. Deliberately empty: the
   headline, the lead and the price line that used to sit around this
   box are gone, because whoever opened /builder/ already knows what
   the page is for. What is left is the field, its aura and — only if
   the account has websites already — a quiet strip of them below. */
.bd-launch{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:26px;padding:min(9vh,86px) 18px 54px;width:100%;overflow-x:clip}
.bd-composer{position:relative;width:100%;max-width:740px;
  animation:bdRise .7s var(--ease-out) both}
@keyframes bdRise{from{opacity:0;transform:translateY(16px) scale(.985)}}

/* the aura the field floats on — this is the "shadow behind the box" */
.bd-composer::before{content:"";position:absolute;inset:-18% -12%;z-index:0;pointer-events:none;
  background:
    radial-gradient(56% 62% at 50% 52%,color-mix(in srgb,var(--btn) 42%,transparent),transparent 72%),
    radial-gradient(44% 52% at 22% 78%,color-mix(in srgb,var(--accent) 34%,transparent),transparent 74%);
  filter:blur(46px);opacity:.72;transition:opacity .5s var(--ease),transform .6s var(--ease)}
.bd-composer:focus-within::before{opacity:1;transform:scale(1.06)}
html[data-theme="light"] .bd-composer::before{opacity:.6}
html[data-theme="light"] .bd-composer:focus-within::before{opacity:.85}

.bd-pod{position:relative;z-index:1;display:flex;flex-direction:column;gap:12px;
  padding:22px 22px 16px;border-radius:32px;
  /* more solid than the OS window glass on purpose: the aura below is
     meant to read as a halo *around* the field, and through a .11 alpha
     surface it stains the middle of the box the customer is typing in. */
  background:linear-gradient(155deg,color-mix(in srgb,var(--bg-base) 55%,var(--glass-a)),color-mix(in srgb,var(--bg-base) 62%,var(--glass-b)));
  -webkit-backdrop-filter:blur(20px) saturate(190%);backdrop-filter:blur(20px) saturate(190%);
  border:1px solid var(--stroke);
  box-shadow:var(--shadow-win),inset 0 1px 0 var(--spec);
  transition:border-color .3s,box-shadow .3s,transform .3s var(--ease)}
.bd-pod:focus-within{border-color:color-mix(in srgb,var(--btn) 48%,transparent);
  box-shadow:var(--shadow-win),inset 0 1px 0 var(--spec),0 0 0 4px color-mix(in srgb,var(--btn) 13%,transparent)}
.bd-pod textarea{width:100%;resize:none;font-size:17px;line-height:1.6;padding:10px 8px 6px;
  color:var(--ink);min-height:132px;max-height:40vh;overflow:auto}
.bd-pod textarea::placeholder{color:var(--ink-3)}
.bd-podfoot{display:flex;align-items:center;gap:12px}
.bd-podfoot .bd-chips{flex:1 1 auto;min-width:0}
.bd-podfoot .bd-chipbox{font-size:12px;padding:5px 11px}
/* only ever carries something blocking — locked, paused, out of credits,
   a build already running. When there is nothing to say it is not printed. */
.bd-podmeta{font-size:12px}
.bd-podmeta .bd-warn{padding:9px 11px;border-radius:12px}
/* the send control: a round arrow, the way the field's own submit reads */
.bd-send{width:42px;height:42px;border-radius:50%;display:inline-grid;place-items:center;flex:0 0 auto;color:#fff;
  background:linear-gradient(180deg,color-mix(in srgb,var(--btn) 88%,#fff 12%),color-mix(in srgb,var(--btn) 78%,#000 22%));
  box-shadow:0 10px 24px -12px color-mix(in srgb,var(--btn) 90%,transparent),inset 0 1px 0 rgba(255,255,255,.42);
  transition:transform .18s var(--ease),filter .2s,opacity .2s}
.bd-send:hover{transform:translateY(-1.5px) scale(1.03);filter:brightness(1.06)}
.bd-send:active{transform:scale(.96)}
.bd-send:disabled{opacity:.4;cursor:not-allowed;transform:none;filter:grayscale(.4)}
.bd-send svg{width:18px;height:18px}

/* the quiet strip of existing websites under the field */
.bd-recent{width:100%;max-width:740px;display:flex;flex-direction:column;gap:9px;
  animation:bdRise .8s .1s var(--ease-out) both}
.bd-recent-h{display:flex;align-items:center;gap:10px;padding:0 4px}
.bd-recent-h span{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.bd-recent-h a{margin-left:auto;font-size:12px;color:var(--ink-3)}
.bd-recent-h a:hover{color:var(--ink)}
.bd-recent-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:9px}
.bd-mini{display:flex;flex-direction:column;gap:5px;padding:12px 14px;border-radius:var(--r);min-width:0;
  background:var(--tile);border:1px solid var(--stroke-2);box-shadow:inset 0 1px 0 var(--spec);transition:.25s var(--ease)}
.bd-mini:hover{background:var(--tile-hover);transform:translateY(-2px);box-shadow:inset 0 1px 0 var(--spec),0 16px 30px -22px rgba(0,0,0,.75)}
.bd-mini b{font-size:13.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bd-mini small{font-size:11.5px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bd-mini .bd-acts{margin-top:2px}

/* ── 9. the composer sheet — the rest of the brief, one step at a time ── */
/* Everything the engine needs beyond the prompt, asked one card at a
   time so a first-time customer is never looking at a fourteen-field
   form. It opens over the field it was started from, never on a new
   screen: the prompt stays visible behind the glass. */
.bd-sheet{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:20px;
  width:100%;max-width:100%;overflow:auto;
  background:color-mix(in srgb,#0b0e16 42%,transparent);
  -webkit-backdrop-filter:blur(10px) saturate(140%);backdrop-filter:blur(10px) saturate(140%);
  animation:bdVeil .32s var(--ease-out) both}
@keyframes bdVeil{from{opacity:0}}
.bd-sheet.is-out{animation:bdVeil .22s var(--ease) reverse both}
.bd-sheet-card{position:relative;width:100%;max-width:min(600px,100%);max-height:calc(100dvh - 40px);overflow:auto;
  display:flex;flex-direction:column;gap:14px;padding:20px 22px 18px;border-radius:var(--r-win);
  background:linear-gradient(155deg,color-mix(in srgb,var(--bg-base) 62%,var(--glass-a)),color-mix(in srgb,var(--bg-base) 70%,var(--glass-b)));
  -webkit-backdrop-filter:blur(22px) saturate(190%);backdrop-filter:blur(22px) saturate(190%);
  border:1px solid var(--stroke);box-shadow:var(--shadow-win),inset 0 1px 0 var(--spec);
  animation:bdSheetIn .46s var(--ease-out) both}
@keyframes bdSheetIn{from{opacity:0;transform:translateY(26px) scale(.965)}}
.bd-sheet.is-out .bd-sheet-card{animation:bdSheetIn .22s var(--ease) reverse both}
.bd-sheet-top{display:flex;align-items:center;gap:10px}
.bd-sheet-top .bd-eyebrow{margin:0}
.bd-sheet-x{margin-left:auto;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;
  color:var(--ink-3);background:var(--tile);border:1px solid var(--stroke-2);font-size:13px;line-height:1}
.bd-sheet-x:hover{color:var(--ink);background:var(--tile-hover)}
.bd-rail{display:flex;gap:5px}
.bd-rail i{flex:1 1 0;height:3px;border-radius:99px;background:color-mix(in srgb,var(--ink) 14%,transparent);transition:background .35s var(--ease)}
.bd-rail i.done{background:color-mix(in srgb,var(--btn) 55%,transparent)}
.bd-rail i.on{background:var(--btn-2)}
.bd-stage-in{display:flex;flex-direction:column;gap:13px;animation:bdStepIn .38s var(--ease-out) both}
.bd-stage-in.back{animation-name:bdStepBack}
@keyframes bdStepIn{from{opacity:0;transform:translateX(22px)}}
@keyframes bdStepBack{from{opacity:0;transform:translateX(-22px)}}
.bd-q{font-size:19px;letter-spacing:-.02em}
.bd-qsub{font-size:12.5px;color:var(--ink-3);line-height:1.6;margin-top:-6px}
.bd-sheet-foot{display:flex;align-items:center;gap:8px;padding-top:2px}
.bd-sheet-foot .bd-btn.prime{margin-left:auto}
.bd-skip{font-size:12px;color:var(--ink-3);background:none;border:0;text-decoration:underline;text-underline-offset:3px}
.bd-skip:hover{color:var(--ink-2)}
.bd-two{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.bd-recap{display:flex;flex-direction:column;gap:1px;border-radius:14px;overflow:hidden;border:1px solid var(--stroke-2);background:var(--stroke-2)}
.bd-recap div{display:grid;grid-template-columns:100px minmax(0,1fr) auto;gap:10px;align-items:baseline;
  padding:9px 12px;background:var(--tile);font-size:12.5px}
.bd-recap em{font-style:normal;color:var(--ink-3);font-size:11.5px}
.bd-recap span{color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bd-recap span.dim{color:var(--ink-3)}
.bd-recap button{font-size:11.5px;color:var(--ink-3);background:none;border:0;text-decoration:underline;text-underline-offset:3px}
.bd-recap button:hover{color:var(--ink)}
.bd-swatchrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.bd-tone{width:30px;height:30px;border-radius:50%;border:2px solid transparent;box-shadow:0 0 0 1px var(--stroke-2);cursor:pointer;transition:.2s}
.bd-tone:hover{transform:translateY(-2px)}
.bd-tone.on{border-color:var(--bg-base);box-shadow:0 0 0 2px var(--btn)}

/* ── 9b. the account, in the same sheet ─────────────────────── */
/* Sign in, open the account, confirm the address, complete the profile:
   the stages a guest passes on the way from Generate to the build, in
   the sheet the brief was written in. Nothing here is a new surface —
   the fields are .bd-field, the buttons are the sheet's own foot; what
   is new is the tab pill, the field-level error and the waiting ring. */
.bd-switch{display:flex;gap:3px;padding:3px;border-radius:999px;background:var(--tile);border:1px solid var(--stroke-2);align-self:flex-start;max-width:100%}
.bd-switch button{flex:1 1 auto;padding:7px 15px;border-radius:999px;border:1px solid transparent;font-size:12.5px;font-weight:560;color:var(--ink-3);white-space:nowrap;transition:.2s}
.bd-switch button:hover{color:var(--ink)}
.bd-switch button.on{background:var(--tile-2);border-color:var(--stroke);color:var(--ink);box-shadow:inset 0 1px 0 var(--spec),0 8px 16px -12px rgba(0,0,0,.55)}
.bd-two .wide{grid-column:1/-1}
/* the sentence under a field the engine, or the rule it enforces, refused */
.bd-ferr{display:none;font-size:11.5px;font-weight:500;line-height:1.4;color:var(--bad)}
.bd-field.is-bad .bd-ferr{display:block}
.bd-field.is-bad input,.bd-field.is-bad select{border-color:color-mix(in srgb,var(--bad) 60%,transparent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--bad) 12%,transparent)}
/* the confirm stage: a ring that keeps turning while the engine is asked
   whether the link in the mail has been clicked */
.bd-wait{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:13px;font-size:12.5px;line-height:1.5;color:var(--ink-2);
  background:color-mix(in srgb,var(--btn) 10%,transparent);border:1px solid color-mix(in srgb,var(--btn) 30%,transparent)}
.bd-wait i{width:16px;height:16px;border-radius:50%;flex:0 0 auto;
  border:2px solid color-mix(in srgb,var(--btn) 28%,transparent);border-top-color:var(--btn-2);animation:bdspin .9s linear infinite}
/* the switch is off: the rest of the product, one press away, inside the note */
.bd-elsewhere{margin-top:9px;gap:6px}
.bd-elsewhere .bd-btn{white-space:normal;text-align:center}

/* ── 10. sites list ─────────────────────────────────────────── */
.bd-list{display:flex;flex-direction:column;gap:8px}
.bd-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 15px;border-radius:var(--r);
  background:var(--tile);border:1px solid var(--stroke-2);box-shadow:inset 0 1px 0 var(--spec);transition:.25s var(--ease)}
.bd-row:hover{background:var(--tile-hover)}
.bd-row h4{font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bd-row .meta{font-size:12px;color:var(--ink-3);display:flex;flex-wrap:wrap;gap:8px;margin-top:3px}
.bd-row .meta a{color:var(--accent)}

/* ── 11. editor ─────────────────────────────────────────────── */
.bd-editor{flex:1;display:grid;grid-template-columns:270px minmax(0,1fr) 320px;gap:0;min-height:0;height:calc(100dvh - 58px)}
.bd-side{background:linear-gradient(160deg,var(--glass-a),var(--glass-b));
  -webkit-backdrop-filter:blur(var(--blur)) saturate(180%);backdrop-filter:blur(var(--blur)) saturate(180%);
  border-right:1px solid var(--stroke-2);overflow:auto;overflow-x:hidden;padding:14px;display:flex;flex-direction:column;gap:12px}
.bd-side.right{border-right:0;border-left:1px solid var(--stroke-2)}
.bd-stage{display:flex;flex-direction:column;min-width:0}
.bd-stagebar{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--stroke-2);
  background:linear-gradient(180deg,var(--glass-a),var(--glass-b));
  -webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur))}
.bd-pages{display:flex;gap:4px;flex-wrap:wrap}
.bd-pages button{padding:5px 11px;border-radius:999px;border:1px solid var(--stroke-2);background:var(--tile);font-size:12px;font-weight:560;color:var(--ink-3);transition:.2s}
.bd-pages button:hover{color:var(--ink);background:var(--tile-hover)}
.bd-pages button.on{background:color-mix(in srgb,var(--btn) 16%,transparent);border-color:color-mix(in srgb,var(--btn) 50%,transparent);color:var(--ink)}
.bd-devices{margin-left:auto;display:flex;gap:4px}
.bd-devices button{padding:5px 10px;border-radius:9px;border:1px solid var(--stroke-2);background:var(--tile);font-size:11.5px;color:var(--ink-3)}
.bd-devices button.on{background:var(--ink);color:var(--bg-base);border-color:var(--ink)}
.bd-canvas{flex:1;overflow:auto;padding:16px;display:flex;justify-content:center}
.bd-frame{width:100%;height:100%;min-height:600px;max-width:100%;border:0;border-radius:12px;background:#fff;
  box-shadow:0 26px 60px -34px rgba(0,0,0,.75);transition:max-width .25s}
.bd-canvas.mobile .bd-frame{max-width:420px}
.bd-canvas.tablet .bd-frame{max-width:820px}
.bd-seclist{display:flex;flex-direction:column;gap:6px}
.bd-sec{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px;padding:8px 10px;border-radius:10px;
  border:1px solid var(--stroke-2);background:var(--tile);cursor:pointer;font-size:12.5px;transition:.2s}
.bd-sec:hover{background:var(--tile-hover)}
.bd-sec>div:first-child{min-width:0}
.bd-sec.on{border-color:color-mix(in srgb,var(--btn) 50%,transparent);background:color-mix(in srgb,var(--btn) 15%,transparent)}
.bd-sec b{display:block;font-size:12.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bd-sec small{display:block;color:var(--ink-3);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bd-sec .tools{display:flex;gap:2px;flex:0 0 auto}
.bd-sec .tools button{width:24px;height:24px;border-radius:6px;border:1px solid transparent;background:none;color:var(--ink-3);font-size:12px;padding:0}
.bd-sec .tools button:hover{background:var(--tile-2);border-color:var(--stroke-2);color:var(--ink)}
.bd-items{display:flex;flex-direction:column;gap:8px}
.bd-item{border:1px solid var(--stroke-2);border-radius:10px;padding:8px;display:grid;gap:6px;background:var(--tile)}
.bd-item .bd-field input,.bd-item .bd-field textarea{padding:6px 9px;font-size:12.5px}
.bd-item textarea{min-height:52px}
.bd-item .rm{justify-self:end;font-size:11px;color:var(--bad);background:none;border:0}
.bd-theme{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bd-swatches{display:flex;flex-wrap:wrap;gap:6px}
.bd-swatch{width:26px;height:26px;border-radius:50%;border:2px solid transparent;box-shadow:0 0 0 1px var(--stroke-2);cursor:pointer}
.bd-swatch.on{border-color:var(--bg-base);box-shadow:0 0 0 2px var(--btn)}
.bd-aibox{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:14px;
  background:linear-gradient(150deg,color-mix(in srgb,var(--btn) 18%,transparent),color-mix(in srgb,var(--accent) 12%,transparent));
  border:1px solid color-mix(in srgb,var(--btn) 30%,transparent)}
.bd-aibox textarea{min-height:64px}
.bd-save{font-size:11.5px;color:var(--ink-3)}
.bd-save.ok{color:var(--ok)}.bd-save.err{color:var(--bad)}

/* ── 12. publish ────────────────────────────────────────────── */
.bd-timeline{display:flex;gap:6px;flex-wrap:wrap}
.bd-tl{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;border:1px solid var(--stroke-2);background:var(--tile);font-size:12px;color:var(--ink-3)}
.bd-tl.done{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 42%,transparent);background:color-mix(in srgb,var(--ok) 13%,transparent)}
.bd-tl.on{color:var(--ink);border-color:color-mix(in srgb,var(--btn) 50%,transparent);background:color-mix(in srgb,var(--btn) 15%,transparent)}
.bd-services{display:flex;flex-direction:column;gap:8px}
.bd-service{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 14px;border-radius:var(--r);
  border:1px solid var(--stroke-2);background:var(--tile)}
.bd-service.on{border-color:color-mix(in srgb,var(--btn) 50%,transparent);background:color-mix(in srgb,var(--btn) 15%,transparent)}
.bd-service b{display:block;font-size:13.5px}
.bd-service small{display:block;color:var(--ink-3);font-size:12px}
.bd-dns{font-size:12.5px;background:var(--field);border:1px dashed var(--stroke);border-radius:12px;padding:10px 12px;line-height:1.7}
.bd-dns code{background:var(--tile-2);border-radius:6px;padding:1px 6px;font-size:11.5px}
.bd-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.bd-plan{padding:14px;border-radius:var(--r);border:1px solid var(--stroke-2);background:var(--tile);display:flex;flex-direction:column;gap:6px}
.bd-plan b{font-size:14px}
.bd-plan .bd-btn{margin-top:auto}

/* ── 13. credits ────────────────────────────────────────────── */
.bd-packs{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.bd-pack{background:var(--tile);border:1px solid var(--stroke-2);border-radius:var(--r);padding:14px;display:flex;flex-direction:column;gap:6px}
.bd-pack b{font-size:20px}
.bd-led{display:flex;flex-direction:column;gap:4px;font-size:12.5px}
.bd-led-row{display:grid;grid-template-columns:120px minmax(0,1fr) auto auto;gap:10px;padding:7px 10px;border-radius:10px;background:var(--tile)}
.bd-led-row>*{min-width:0;overflow-wrap:anywhere}
.bd-led-row.h{background:transparent;color:var(--ink-3);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.bd-led-row b.neg{color:var(--bad)}.bd-led-row b.pos{color:var(--ok)}
.bd-big{display:flex;flex-direction:column;gap:2px}
.bd-big b{font-size:34px;line-height:1;letter-spacing:-.02em}
.bd-big em{font-style:normal;font-size:12px;color:var(--ink-3)}

/* ── 14. gate ───────────────────────────────────────────────── */
.bd-gate{max-width:540px;margin:min(9vh,80px) auto;text-align:center;align-items:center}
.bd-gate .bd-acts{justify-content:center}

/* ── 15. narrow ─────────────────────────────────────────────── */
@media (max-width:1100px){.bd-editor{grid-template-columns:240px minmax(0,1fr) 300px}}
@media (max-width:900px){
  .bd-grid2{grid-template-columns:1fr}
  .bd-editor{grid-template-columns:1fr;height:auto}
  .bd-side{border:0;border-bottom:1px solid var(--stroke-2);max-height:40vh}
  .bd-side.right{border-left:0;border-top:1px solid var(--stroke-2)}
  .bd-stage{min-height:70vh}
  .bd-plans{grid-template-columns:1fr}
  .bd-nav{display:none}
  .bd-user{display:none}
}
@media (max-width:640px){
  .bd-launch{padding:26px 14px 40px;justify-content:flex-start;gap:20px}
  /* the glow keeps bleeding — blur is ink overflow and costs nothing — but
     its BOX stays inside the field, which is what scrollable overflow reads */
  .bd-composer::before{inset:-16% 0}
  .bd-pod{padding:16px 15px 12px;border-radius:24px}
  .bd-pod textarea{font-size:16px;min-height:112px}
  .bd-podfoot{gap:9px;align-items:flex-end}
  .bd-podfoot .bd-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .bd-podfoot .bd-chips::-webkit-scrollbar{display:none}
  .bd-podfoot .bd-chipbox{flex:0 0 auto}
  .bd-send{width:38px;height:38px}
  .bd-two{grid-template-columns:1fr}
  .bd-sheet{padding:0;place-items:end stretch}
  .bd-sheet-card{max-width:none;max-height:92dvh;border-radius:24px 24px 0 0;padding:16px 16px 18px}
  .bd-recap div{grid-template-columns:96px minmax(0,1fr) auto}
  .bd-wrap{padding:16px 14px 36px}
  /* the ledger drops to three columns and the date takes its own line;
     the header row goes with it — "+30" beside a balance needs no caption */
  .bd-led-row{grid-template-columns:minmax(0,1fr) auto auto;gap:4px 8px}
  .bd-led-row>span:first-child{grid-column:1/-1;font-size:11px;color:var(--ink-3)}
  .bd-led-row.h{display:none}
  /* the bar has to hold logo + credits + appearance + the way back on a
     375px screen: the product name and the button padding are what go. */
  .bd-top{gap:7px;padding:9px 12px}
  .bd-top .bd-logo small{display:none}
  .bd-chip{padding:5px 10px;gap:5px}
  .bd-right .bd-btn.sm{padding:6px 10px;font-size:11.5px}
  .bd-podfoot .bd-chips{-webkit-mask-image:linear-gradient(90deg,#000 84%,transparent);mask-image:linear-gradient(90deg,#000 84%,transparent)}
}

/* ── 16. reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .bd-desk b{animation:none}
  .bd-composer,.bd-recent,.bd-sheet,.bd-sheet-card,.bd-stage-in{animation:none!important}
  .bd-wait i{animation-duration:2.4s}
  .bd-btn,.bd-send,.bd-mini,.bd-chipbox,.bd-tone,.bd-switch button{transition:none}
  .bd-btn:hover,.bd-send:hover,.bd-mini:hover,.bd-chipbox:hover,.bd-tone:hover{transform:none}
}