/* ============================================================================
   ServeHub · Website builder — split editor + live preview
   "Rugged trade-built" look, imported from the Claude Design servehub project.

   Everything here is scoped under the `.wb` wrapper (never :root / bare element
   selectors) so the design system's tokens + hard-edged primitives cannot leak
   into the Tailwind-based rest of the dashboard. dashboard.css already @imports
   Barlow Condensed / Barlow / JetBrains Mono, so no font import is needed here.

   Loaded page-only via `content_for :head` in app/views/website_pages/show.
   The live preview is a REAL server-rendered iframe (public/websites templates);
   the mockup's client-side `.site*` renderer is intentionally not ported.
   ============================================================================ */

/* ---- design tokens (scoped, not :root) ------------------------------------ */
.wb{
  --paper:#f3efe6; --paper-2:#ece6d8; --paper-3:#e4ddcc; --white:#ffffff;
  --ink:#17191d; --ink-2:#22262c; --ink-3:#2b3038; --ink-soft:#3a3f47;
  --steel:#6a7079; --steel-2:#8b9099; --steel-3:#aab0b8;
  --line:#d9d3c4; --line-2:#cfc8b6; --line-ink:#2e333b;
  --blue:#0ea5e9; --blue-deep:#0b6fa3; --blue-press:#0284c7; --blue-ink:#063f5c; --blue-wash:#e3f1f9;
  --amber:#f5a31f; --green:#18794e; --green-wash:#e2efe7; --red:#c14034; --red-wash:#f6e3e0;
  --shadow:3px 3px 0 var(--ink); --shadow-sm:2px 2px 0 var(--ink);
  --r:14px; --r-sm:10px; --topbar:68px;
  --wb-rail-w:186px; --wb-preview-w:452px;

  color:var(--ink);
  font-family:"Barlow",system-ui,sans-serif;
  display:flex;flex-direction:column;
  /* Bound to the viewport so the editor panel and the (tall, scaled) preview
     scroll INTERNALLY instead of stretching the whole page to the site height. */
  height:calc(100vh - 118px);
  min-height:560px;
  -webkit-font-smoothing:antialiased;
}
.wb *{box-sizing:border-box}
.wb h1,.wb h2,.wb h3,.wb h4{font-family:"Barlow Condensed",sans-serif;font-weight:800;line-height:1;letter-spacing:-.005em;margin:0}
.wb .mono{font-family:"JetBrains Mono",monospace}

/* ---- primitives (scoped subset of dash.css) ------------------------------- */
.wb .btn{
  font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.02em;
  font-size:16px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 17px;border:2px solid var(--ink);border-radius:var(--r-sm);
  background:var(--white);color:var(--ink);cursor:pointer;text-decoration:none;
  box-shadow:var(--shadow);transition:transform .05s,box-shadow .05s;white-space:nowrap;
}
.wb .btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
.wb .btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.4}
.wb .btn-primary{background:var(--blue);color:#04222f}
.wb .btn-ink{background:var(--ink);color:var(--paper)}
.wb .btn-sm{font-size:14px;padding:8px 13px;box-shadow:var(--shadow-sm)}
.wb .btn-sm:active{transform:translate(2px,2px)}
.wb .btn-xs{font-size:13px;padding:6px 11px;border-radius:8px;box-shadow:var(--shadow-sm)}
.wb .btn-xs:active{transform:translate(2px,2px)}
.wb .btn-ghost{background:var(--white);color:var(--ink-soft);box-shadow:none;border-color:var(--line-2)}
.wb .btn-ghost:hover{border-color:var(--ink);color:var(--ink);box-shadow:var(--shadow-sm)}
.wb .btn-ghost:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--ink)}
.wb .btn[disabled]{opacity:.55;cursor:default;pointer-events:none}

.wb .inp,.wb select.inp,.wb textarea.inp{
  width:100%;border:2px solid var(--ink);border-radius:var(--r-sm);background:var(--white);
  padding:11px 13px;font-family:"Barlow",sans-serif;font-size:14.5px;color:var(--ink);
  box-shadow:var(--shadow-sm);transition:.12s;
}
.wb .inp::placeholder{color:var(--steel-2)}
.wb .inp:focus,.wb select.inp:focus,.wb textarea.inp:focus{outline:none;border-color:var(--blue);box-shadow:2px 2px 0 var(--blue-ink)}
.wb textarea.inp{resize:vertical;min-height:96px}
.wb select.inp{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317191d' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:16px;padding-right:38px}

/* toggle switch */
.wb .switch{position:relative;flex:0 0 auto;width:48px;height:28px;cursor:pointer;display:inline-block}
.wb .switch input{position:absolute;opacity:0;width:0;height:0}
.wb .switch .tk{position:absolute;inset:0;border:2px solid var(--ink);border-radius:999px;background:var(--paper-2);
  box-shadow:var(--shadow-sm);transition:background .14s}
.wb .switch .tk::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;
  background:var(--white);border:2px solid var(--ink);transition:transform .16s cubic-bezier(.34,1.32,.5,1)}
.wb .switch input:checked + .tk{background:var(--blue)}
.wb .switch input:checked + .tk::after{transform:translateX(20px)}

/* ============ PAGE HEADER / PUBLISH BAR ============ */
.wb-top{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;flex-wrap:wrap;margin-bottom:20px}
.wb-top h1{font-size:40px;line-height:.98;text-transform:none}
.wb-top .sub{font-size:14px;color:var(--steel);margin-top:7px;max-width:60ch}
.wb-top-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto;flex-wrap:wrap}

.wb .status-pill{
  display:inline-flex;align-items:center;gap:8px;
  font-family:"JetBrains Mono",monospace;font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;
  padding:9px 13px;border:2px solid var(--ink);border-radius:var(--r-sm);
  background:var(--green-wash);color:#136a45;box-shadow:var(--shadow-sm);
}
.wb .status-pill .d{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(24,121,78,.18)}
.wb .status-pill.draft{background:var(--paper-2);color:var(--steel)}
.wb .status-pill.draft .d{background:var(--steel);box-shadow:none}

.wb .save-state{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--steel);
  display:inline-flex;align-items:center;gap:7px;text-transform:uppercase;letter-spacing:.04em}
.wb .save-state::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);flex:0 0 auto}
.wb .save-state.saving::before{background:var(--amber);animation:pvpulse 1s ease-in-out infinite}
.wb .save-state.error{color:var(--red)}
.wb .save-state.error::before{background:var(--red)}

.wb .btn.preview-toggle.on{background:var(--ink);color:var(--paper)}
.wb .btn.preview-toggle.on svg{color:var(--blue)}

/* This sheet loads only on /website_page, so widening the shared max-w-7xl layout
   container here is safe and lets the builder (and its preview) use large screens.
   Capped where the desktop preview reaches ~100% scale; degrades gracefully if
   :has() is unsupported (builder just stays at the default width). */
#page-content > .max-w-7xl:has(.wb){max-width:2100px}

/* ============ WORKSPACE GRID ============ */
.wb-work{
  flex:1 1 auto;min-height:0;
  /* Editor caps at a comfortable width but can shrink (min 0 → never overflows a
     narrow desktop); the PREVIEW column absorbs all remaining space, so a bigger
     screen means a bigger, higher-scale live preview. */
  display:grid;grid-template-columns:var(--wb-rail-w) minmax(0,620px) minmax(var(--wb-preview-w),1fr);gap:0;
  border:2px solid var(--ink);border-radius:var(--r);background:var(--white);box-shadow:var(--shadow);overflow:hidden;
  transition:grid-template-columns .34s cubic-bezier(.4,0,.2,1);
}
.wb-work.preview-closed{grid-template-columns:var(--wb-rail-w) minmax(0,1fr) 0px}

/* ---- left tab rail ---- */
.wb-rail{border-right:2px solid var(--ink);background:var(--paper-2);padding:14px 12px;display:flex;flex-direction:column;gap:5px;overflow-y:auto}
.wb-rail .rail-cap{font-family:"JetBrains Mono",monospace;font-size:10px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--steel);padding:4px 10px 8px;display:flex;align-items:center;gap:8px}
.wb-rail .rail-cap::before{content:"";width:14px;height:2px;background:var(--amber)}
.wb-tab{display:flex;align-items:center;gap:12px;width:100%;padding:11px 12px;border:2px solid transparent;border-radius:var(--r-sm);
  background:transparent;cursor:pointer;color:var(--ink-soft);text-align:left;
  font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:18px;text-transform:uppercase;letter-spacing:.01em;line-height:1;
  transition:background .13s,color .13s,border-color .13s}
.wb-tab .ico{width:22px;height:22px;flex:0 0 auto;display:grid;place-items:center;color:var(--steel)}
.wb-tab .ico svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.9}
.wb-tab .lbl{flex:1 1 auto}
.wb-tab:hover{background:var(--paper-3);color:var(--ink)}
.wb-tab:hover .ico{color:var(--ink)}
.wb-tab.active{background:var(--ink);color:var(--paper);border-color:#04222f;box-shadow:2px 2px 0 var(--blue-ink)}
.wb-tab.active .ico{color:var(--blue)}
.wb-tab.ai.active{background:linear-gradient(120deg,#3a1d6e,#5b2ea6 55%,#7c3aed);border-color:#2a0f52}
.wb-tab.ai.active .ico{color:#fff}
.wb-rail .rail-foot{margin-top:auto;padding-top:12px;border-top:2px solid var(--line-2)}
.wb-rail .rail-hint{font-size:11.5px;color:var(--steel);line-height:1.45;padding:2px 10px}

/* ---- editor panel ---- */
.wb-panel{overflow-y:auto;min-width:0;background:var(--white);scrollbar-width:thin;scrollbar-color:var(--line-2) transparent;position:relative}
.wb-panel::-webkit-scrollbar{width:9px}
.wb-panel::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:5px;border:2px solid var(--white)}
.wb-pane{display:none;padding:24px 26px 40px}
.wb-pane.active{display:block;animation:paneIn .22s ease}
@keyframes paneIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.pane-head{margin-bottom:20px}
.pane-head h2{font-size:28px;line-height:1;text-transform:none}
.pane-head p{font-size:13.5px;color:var(--steel);margin-top:6px;max-width:60ch}

/* editor section block */
.wb-sec{border:2px solid var(--line-2);border-radius:var(--r);background:var(--white);margin-bottom:18px;overflow:hidden}
.wb-sec-head{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--paper-2);border-bottom:2px solid var(--line-2);cursor:pointer;user-select:none}
.wb-sec-head .sh-caret{color:var(--steel);transition:transform .2s;flex:0 0 auto}
.wb-sec-head .sh-caret svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.4}
.wb-sec.collapsed .sh-caret{transform:rotate(-90deg)}
.wb-sec-head .sh-ico{width:34px;height:34px;flex:0 0 auto;border:2px solid var(--ink);border-radius:9px;display:grid;place-items:center;background:var(--white);color:var(--ink);box-shadow:var(--shadow-sm)}
.wb-sec-head .sh-ico svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}
.wb-sec-head .sh-txt{flex:1 1 auto;min-width:0}
.wb-sec-head .sh-txt b{font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:19px;text-transform:uppercase;letter-spacing:.01em;line-height:1;display:block}
.wb-sec-head .sh-txt span{font-size:12px;color:var(--steel);display:block;margin-top:3px}
.wb-sec-head .sh-count{font-family:"JetBrains Mono",monospace;font-size:11px;font-weight:700;color:var(--steel);background:var(--white);border:1.5px solid var(--line-2);border-radius:6px;padding:2px 7px}
.wb-sec-body{padding:16px;display:grid;gap:14px}
.wb-sec.collapsed .wb-sec-body{display:none}
.sec-add{margin-left:auto;flex:0 0 auto}

/* repeater card */
.wb .rep-list{display:grid;gap:12px}
.wb .rep{border:2px solid var(--ink);border-radius:var(--r-sm);background:var(--white);box-shadow:var(--shadow-sm);padding:14px;display:grid;gap:11px;position:relative}
.wb .rep-two{display:grid;grid-template-columns:1fr 168px;gap:10px}
.wb .rep-two.even{grid-template-columns:1fr 1fr}
.wb .rep-foot{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:1px}
.wb .rep-del{display:inline-flex;align-items:center;gap:7px;background:none;border:none;cursor:pointer;
  font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.02em;
  color:var(--red);padding:6px 8px;border-radius:7px;transition:background .12s}
.wb .rep-del:hover{background:var(--red-wash)}
.wb .rep-del svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}
.wb .rep-empty{font-size:12.5px;color:var(--steel);font-family:"JetBrains Mono",monospace;padding:2px}

/* labelled field cluster */
.wb .f{display:grid;gap:6px}
.wb .f > label,.wb .f .flab{font-family:"Barlow",sans-serif;font-weight:600;font-size:13px;color:var(--ink)}
.wb .f .hint{font-size:11.5px;color:var(--steel);font-family:"JetBrains Mono",monospace}
.wb .f-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.wb .inp.sm{padding:9px 11px;font-size:13.5px}
.wb textarea.inp.sm{min-height:70px}
.wb .charc{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--steel);text-align:right}
.wb .charc.over{color:var(--red)}

/* ============ AI STRIP ============ */
.wb .ai-strip{border:2px solid var(--ink);border-radius:var(--r);overflow:hidden;
  background:linear-gradient(120deg,#3a1d6e,#5b2ea6 55%,#7c3aed);box-shadow:var(--shadow);
  margin-bottom:20px;display:flex;align-items:center;gap:16px;padding:16px 18px;color:#fff;flex-wrap:wrap}
.wb .ai-strip .ai-ico{width:44px;height:44px;flex:0 0 auto;border:2px solid rgba(255,255,255,.35);border-radius:11px;display:grid;place-items:center;background:rgba(255,255,255,.12)}
.wb .ai-strip .ai-ico svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:2}
.wb .ai-strip .ai-tx{flex:1 1 240px;min-width:0}
.wb .ai-strip .ai-tx b{font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:20px;text-transform:uppercase;letter-spacing:.01em;display:block;line-height:1}
.wb .ai-strip .ai-tx span{font-size:12.5px;color:rgba(255,255,255,.82);display:block;margin-top:4px;line-height:1.4}
.wb .ai-strip .ai-acts{display:flex;gap:9px;flex:0 0 auto;flex-wrap:wrap}
.wb .ai-strip .btn{box-shadow:2px 2px 0 rgba(0,0,0,.4)}
.wb .btn.on-ai{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.5)}
.wb .btn.on-ai:hover{background:rgba(255,255,255,.24)}
.wb .btn.ai-primary{background:#fff;color:#4c1d95;border-color:#2a0f52}

/* ============ DESIGN — theme gallery ============ */
.wb .theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:12px}
.wb .theme-card{border:2px solid var(--ink);border-radius:var(--r-sm);background:var(--white);box-shadow:var(--shadow-sm);cursor:pointer;overflow:hidden;text-align:left;padding:0;transition:transform .08s,box-shadow .08s}
.wb .theme-card:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}
.wb .theme-card.active{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-wash),3px 3px 0 var(--blue-ink)}
.wb .theme-thumb{height:88px;position:relative;overflow:hidden;border-bottom:2px solid var(--ink);display:flex;flex-direction:column;justify-content:space-between;padding:10px}
.wb .theme-thumb .tt-bar{height:8px;width:52px;border-radius:3px}
.wb .theme-thumb .tt-h{font-weight:800;line-height:.9;letter-spacing:-.01em;font-size:19px}
.wb .theme-thumb .tt-chip{align-self:flex-start;font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:3px 7px;border-radius:20px;color:#fff}
.wb .theme-meta{display:flex;align-items:center;gap:9px;padding:10px 12px}
.wb .theme-meta .dot{width:11px;height:11px;border-radius:50%;flex:0 0 auto;border:1.5px solid rgba(0,0,0,.25)}
.wb .theme-meta .nm{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:15px;text-transform:uppercase;letter-spacing:.01em;flex:1 1 auto;line-height:1}
.wb .theme-meta .ck{width:20px;height:20px;border-radius:50%;background:var(--blue);color:#04222f;display:none;place-items:center;flex:0 0 auto}
.wb .theme-meta .ck svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:3}
.wb .theme-card.active .ck{display:grid}

/* accent swatches */
.wb .swatch-wrap{display:flex;flex-wrap:wrap;gap:10px 16px;padding-bottom:22px}
.wb .swatch-cell{text-align:center}
.wb .swatch{width:46px;height:46px;border-radius:11px;border:2px solid var(--ink);cursor:pointer;box-shadow:var(--shadow-sm);position:relative;transition:transform .08s}
.wb .swatch:hover{transform:translate(-1px,-1px)}
.wb .swatch.active{box-shadow:0 0 0 3px var(--paper),0 0 0 5px var(--ink)}
.wb .swatch.active::after{content:"";position:absolute;inset:0;margin:auto;width:15px;height:15px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.4)}
.wb .swatch-lab{font-family:"JetBrains Mono",monospace;font-size:9.5px;color:var(--steel);margin-top:6px;text-transform:uppercase;letter-spacing:.04em}

/* hero style option cards */
.wb .opt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.wb .opt-card{border:2px solid var(--ink);border-radius:var(--r-sm);background:var(--white);cursor:pointer;box-shadow:var(--shadow-sm);overflow:hidden;transition:transform .08s,box-shadow .08s}
.wb .opt-card:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}
.wb .opt-card.active{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-wash),2px 2px 0 var(--blue-ink)}
.wb .opt-thumb{height:66px;background:var(--paper-2);border-bottom:2px solid var(--ink);position:relative;overflow:hidden}
.wb .opt-name{padding:8px 10px;font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.01em}
.wb .hd{position:absolute;inset:8px;display:flex;gap:5px}
.wb .hd .txts{display:flex;flex-direction:column;gap:4px;justify-content:center;flex:1}
.wb .hd .txts b{height:9px;background:var(--ink);border-radius:2px;width:80%}
.wb .hd .txts s{height:5px;background:var(--steel-3);border-radius:2px;width:60%}
.wb .hd .img{background:var(--blue);border-radius:3px;flex:1}
.wb .hd.center{flex-direction:column;align-items:center;justify-content:center}
.wb .hd.center b{height:9px;background:var(--ink);border-radius:2px;width:70%}
.wb .hd.center s{height:5px;background:var(--steel-3);border-radius:2px;width:50%;margin-top:4px}

/* ============ SECTIONS (build your page) ============ */
.wb .sec-list{display:flex;flex-direction:column;gap:9px}
.wb .sec-item{display:flex;align-items:center;gap:13px;padding:12px 14px;border:2px solid var(--ink);border-radius:var(--r-sm);background:var(--white);box-shadow:var(--shadow-sm)}
.wb .sec-item.off{background:var(--paper-2);border-style:dashed;box-shadow:none}
.wb .sec-item .grip{color:var(--steel-2);cursor:grab;flex:0 0 auto;display:grid;place-items:center;width:26px;height:26px;border-radius:6px}
.wb .sec-item .grip:hover{background:var(--paper-2);color:var(--ink)}
.wb .sec-item .grip svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}
.wb .sec-item .s-ico{width:34px;height:34px;flex:0 0 auto;border:2px solid var(--ink);border-radius:9px;display:grid;place-items:center;background:var(--white);color:var(--ink)}
.wb .sec-item.off .s-ico{background:var(--paper-2);color:var(--steel-2);border-color:var(--line-2)}
.wb .sec-item .s-ico svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}
.wb .sec-item .s-tx{flex:1 1 auto;min-width:0}
.wb .sec-item .s-tx b{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:18px;line-height:1;display:block}
.wb .sec-item .s-tx span{font-size:12px;color:var(--steel);display:block;margin-top:3px}
.wb .sec-item.opacity-50{opacity:.5;box-shadow:4px 4px 0 var(--blue-ink);border-color:var(--blue)}

/* ============ MEDIA ============ */
.wb .thumb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:10px}
.wb .thumb{aspect-ratio:1;border:2px solid var(--ink);border-radius:var(--r-sm);overflow:hidden;position:relative;box-shadow:var(--shadow-sm);background:var(--paper-2)}
.wb .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.wb .thumb .rm{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:6px;border:2px solid var(--ink);background:var(--white);color:var(--red);display:grid;place-items:center;cursor:pointer;box-shadow:1px 1px 0 var(--ink)}
.wb .thumb .rm svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.6}
.wb .thumb.add{border-style:dashed;cursor:pointer;color:var(--steel);display:grid;place-items:center;background:var(--white);gap:4px;text-align:center}
.wb .thumb.add:hover{border-color:var(--blue);color:var(--blue-deep)}
.wb .thumb.add svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2}
.wb .thumb.add span{font-family:"JetBrains Mono",monospace;font-size:9px;text-transform:uppercase;letter-spacing:.04em}

.wb .img-drop{border:2px dashed var(--line-2);border-radius:var(--r-sm);background:var(--paper-2);padding:20px;display:flex;align-items:center;gap:16px;position:relative;cursor:pointer}
.wb .img-drop:hover{border-color:var(--blue)}
.wb .img-drop .id-ico{width:48px;height:48px;flex:0 0 auto;border:2px solid var(--ink);border-radius:11px;display:grid;place-items:center;background:var(--white);color:var(--ink);box-shadow:var(--shadow-sm)}
.wb .img-drop .id-ico svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.9}
.wb .img-drop .id-tx{flex:1 1 auto;min-width:0}
.wb .img-drop .id-tx b{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:17px;text-transform:uppercase;display:block;line-height:1}
.wb .img-drop .id-tx span{font-size:12px;color:var(--steel);display:block;margin-top:4px}
.wb .img-drop.filled{border-style:solid;border-color:var(--ink);background:var(--white)}
.wb .img-drop .id-prev{width:64px;height:64px;flex:0 0 auto;border:2px solid var(--ink);border-radius:9px;overflow:hidden;box-shadow:var(--shadow-sm)}
.wb .img-drop .id-prev img{width:100%;height:100%;object-fit:cover}
.wb .img-drop input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}
.wb .img-remove{display:inline-flex;align-items:center;gap:6px;background:none;border:none;cursor:pointer;color:var(--red);font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.02em;padding:4px 6px;border-radius:6px}
.wb .img-remove:hover{background:var(--red-wash)}
.wb .img-remove svg{width:15px;height:15px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:2}

/* ============ CALLOUTS / URL / LANGS ============ */
.wb .wb-callout{display:flex;align-items:center;gap:13px;padding:14px 16px;border:2px solid;border-radius:var(--r-sm)}
.wb .wb-callout.ok{background:var(--green-wash);border-color:#bcdcc9;color:#136a45}
.wb .wb-callout.info{background:var(--blue-wash);border-color:#bfe0f1;color:var(--blue-ink)}
.wb .wb-callout.muted{background:var(--paper-2);border-color:var(--line-2);color:var(--ink-soft)}
.wb .wb-callout .co-ic{width:22px;height:22px;flex:0 0 auto}
.wb .wb-callout .co-ic svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2}
.wb .wb-callout .co-tx{flex:1 1 auto;min-width:0}
.wb .wb-callout .co-tx b{font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:16px;text-transform:uppercase;display:block;line-height:1}
.wb .wb-callout .co-tx span{font-size:12.5px;display:block;margin-top:3px}
.wb .wb-callout .co-tx span b{display:inline;font-size:inherit;text-transform:none}
.wb .wb-callout .co-act{flex:0 0 auto;margin-left:auto}

.wb .copy-row{display:flex;gap:0;border:2px solid var(--ink);border-radius:var(--r-sm);overflow:hidden;box-shadow:var(--shadow-sm)}
.wb .copy-row input{flex:1 1 auto;border:none;padding:12px 14px;font-family:"JetBrains Mono",monospace;font-size:13px;color:var(--ink);background:var(--white);min-width:0}
.wb .copy-row input:focus{outline:none}
.wb .copy-row button{border:none;border-left:2px solid var(--ink);background:var(--paper-2);cursor:pointer;padding:0 16px;
  font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:15px;text-transform:uppercase;color:var(--ink);display:inline-flex;align-items:center;gap:7px;transition:.12s}
.wb .copy-row button:hover{background:var(--blue);color:#04222f}
.wb .copy-row button svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}

.wb .lang-row{display:flex;flex-wrap:wrap;gap:10px}
.wb .lang-chip{display:inline-flex;align-items:center;gap:9px;padding:9px 13px;border:2px solid var(--line-2);border-radius:var(--r-sm);background:var(--white);cursor:pointer;font-weight:600;font-size:13.5px;transition:.12s}
.wb .lang-chip:hover{border-color:var(--ink)}
.wb .lang-chip input{width:18px;height:18px;border:2px solid var(--ink);border-radius:5px;appearance:none;-webkit-appearance:none;cursor:pointer;background:var(--white);display:grid;place-items:center;flex:0 0 auto}
.wb .lang-chip input:checked{background:var(--blue)}
.wb .lang-chip input:checked::after{content:"✓";color:#04222f;font-weight:800;font-size:12px}
.wb .lang-chip:has(input:checked){border-color:var(--ink);background:var(--blue-wash)}
.wb .lang-list{margin-top:6px;display:grid;gap:9px}
.wb .lang-list .lr{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:2px solid var(--line-2);padding-top:9px}
.wb .lang-list .lr .st{font-size:11px;font-family:"JetBrains Mono",monospace;text-transform:uppercase;letter-spacing:.04em}
.wb .lang-list .lr .st.done{color:#136a45}
.wb .lang-list .lr .st.todo{color:var(--amber)}

/* ============ SEO PREVIEW ============ */
.wb .seo-preview{border:2px solid var(--line-2);border-radius:10px;padding:14px 16px;background:var(--white)}
.wb .seo-preview .u{font-family:"JetBrains Mono",monospace;font-size:12px;color:#136a45}
.wb .seo-preview .t{font-family:"Barlow",sans-serif;font-size:19px;color:#1a0dab;margin-top:3px;font-weight:600}
.wb .seo-preview .d{font-size:13px;color:var(--steel);margin-top:4px;line-height:1.45}

/* ============ LIVE PREVIEW PANE ============ */
.wb-preview{border-left:2px solid var(--ink);background:var(--paper-3);display:flex;flex-direction:column;min-width:0;overflow:hidden}
.wb-work.preview-closed .wb-preview{border-left-width:0}
.wb-preview-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:2px solid var(--ink);background:var(--paper-2);flex:0 0 auto;flex-wrap:wrap}
.wb-preview-bar .pv-cap{font-family:"JetBrains Mono",monospace;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--steel);display:flex;align-items:center;gap:8px;flex:0 0 auto}
.wb-preview-bar .pv-cap .live-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(24,121,78,.2);animation:pvpulse 2.4s ease-in-out infinite}
@keyframes pvpulse{0%,100%{opacity:1}50%{opacity:.45}}
.wb-preview-bar .grow{flex:1 1 auto}
.wb-preview-bar .pv-x{width:34px;height:34px;flex:0 0 auto;border:2px solid var(--ink);border-radius:8px;background:var(--white);display:grid;place-items:center;cursor:pointer;color:var(--ink);box-shadow:var(--shadow-sm);transition:.1s}
.wb-preview-bar .pv-x:hover{background:var(--ink);color:var(--paper)}
.wb-preview-bar .pv-x:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--ink)}
.wb-preview-bar .pv-x svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.4}

/* "Open ↗" — view unpublished changes full-page in a new tab */
.wb-preview-bar .pv-open{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;border:2px solid var(--ink);border-radius:8px;
  background:var(--white);color:var(--ink);padding:6px 11px;cursor:pointer;text-decoration:none;box-shadow:var(--shadow-sm);
  font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.02em;transition:.1s}
.wb-preview-bar .pv-open:hover{background:var(--blue);color:#04222f}
.wb-preview-bar .pv-open:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--ink)}
.wb-preview-bar .pv-open svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}

.wb .device-toggle{display:inline-flex;border:2px solid var(--ink);border-radius:9px;overflow:hidden;box-shadow:var(--shadow-sm);background:var(--white);flex:0 0 auto}
.wb .device-toggle button{border:none;background:var(--white);cursor:pointer;padding:7px 12px;display:inline-flex;align-items:center;gap:7px;
  font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.02em;color:var(--ink-soft);border-right:2px solid var(--ink);transition:.12s}
.wb .device-toggle button:last-child{border-right:none}
.wb .device-toggle button svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
.wb .device-toggle button.active{background:var(--ink);color:var(--paper)}

/* stage that letterboxes + scales the iframe frame */
.wb-stage{flex:1 1 auto;min-height:0;position:relative;overflow:auto;
  background:radial-gradient(circle at 1px 1px, rgba(23,25,29,.10) 1px, transparent 0) 0 0/16px 16px,var(--paper-3);
  display:flex;align-items:flex-start;justify-content:center;padding:20px}
.wb-frame-wrap{position:relative;transform-origin:top center;flex:0 0 auto}
.wb-frame{background:#fff;overflow:hidden;box-shadow:0 20px 50px -18px rgba(0,0,0,.55),0 0 0 2px var(--ink)}
.wb-frame.desktop{width:1200px;border-radius:12px}
.wb-frame.mobile{width:390px;border-radius:34px;border:12px solid #17191d;box-shadow:0 24px 60px -18px rgba(0,0,0,.6)}
.wb-frame iframe{display:block;width:100%;border:0;background:#fff}
.wb-scale-note{position:absolute;left:14px;bottom:12px;z-index:5;font-family:"JetBrains Mono",monospace;font-size:10px;color:var(--steel);
  background:var(--white);border:1.5px solid var(--line-2);border-radius:6px;padding:3px 8px;text-transform:uppercase;letter-spacing:.05em;pointer-events:none}

/* reopen handle */
.pv-reopen{position:absolute;top:50%;right:0;transform:translateY(-50%);z-index:6;writing-mode:vertical-rl;
  border:2px solid var(--ink);border-right:none;border-radius:10px 0 0 10px;background:var(--blue);color:#04222f;padding:16px 9px;cursor:pointer;
  box-shadow:-2px 2px 0 var(--blue-ink);font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:15px;text-transform:uppercase;letter-spacing:.08em;display:none;align-items:center;gap:9px}
.wb-work.preview-closed .pv-reopen{display:inline-flex}
.pv-reopen svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.4}

/* ============ EMBEDDED AI CHAT PANE ============
   Reuses the .we-* chat styles from dashboard.css; here we just make the pane
   fill the editor column so the messages list scrolls and the input bar pins. */
/* Fill the panel reliably (grid height:100% is unreliable when sibling panes
   collapse), so pin the pane to the panel's box and let the chat flex inside. */
.wb-pane.assistant{padding:0}
.wb-pane.assistant.active{display:flex;flex-direction:column;position:absolute;inset:0}
.wb-pane.assistant .we-chat{flex:1 1 auto;min-height:0;height:100%;border:0;border-radius:0}
.wb-pane.assistant .we-inputbar{border-top:2px solid var(--line-2)}
.wb-pane.assistant .we-preview-wrap{display:none} /* preview lives in the shared right pane */

/* ============ TOAST ============ */
.wb-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);z-index:120;
  background:var(--ink);color:var(--paper);border:2px solid #04222f;border-radius:12px;box-shadow:4px 4px 0 rgba(0,0,0,.3);
  padding:13px 18px;font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:16px;text-transform:uppercase;letter-spacing:.02em;
  opacity:0;transition:opacity .2s,transform .2s;display:flex;align-items:center;gap:10px;pointer-events:none}
.wb-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.wb-toast .ok{color:#33b87c}

/* ============ RESPONSIVE ============ */
@media(max-width:1320px){ .wb{--wb-preview-w:400px} }
@media(max-width:1080px){
  .wb-work,.wb-work.preview-open,.wb-work.preview-closed{grid-template-columns:var(--wb-rail-w) minmax(0,1fr)}
  .wb-preview{position:fixed;top:0;right:0;bottom:0;width:min(560px,94vw);z-index:60;border-left:2px solid var(--ink);
    box-shadow:-10px 0 50px rgba(0,0,0,.4);transition:transform .32s cubic-bezier(.4,0,.2,1)}
  .wb-work.preview-closed .wb-preview{transform:translateX(101%)}
  .wb-work.preview-open .wb-preview{transform:none}
}
@media(max-width:820px){
  .wb-work,.wb-work.preview-open,.wb-work.preview-closed{grid-template-columns:60px minmax(0,1fr)}
  .wb-tab .lbl,.wb-rail .rail-cap,.wb-rail .rail-foot{display:none}
  .wb-tab{justify-content:center;padding:11px 0}
}
@media(max-width:720px){
  .wb-top h1{font-size:32px}
  .wb-top-actions{width:100%}
  .wb .rep-two,.wb .rep-two.even,.wb .f-row{grid-template-columns:1fr}
}