/* The Site editor demo: a working miniature of the real editor
   (inc/builder-demo.php, assets/js/builder-demo.js). Colors and shapes are
   taken from admin/editor.php so it looks like the thing you get. */
.bdemo {
  --ms-acc: #19a9bd;
  --bd-navy: #14263b; --bd-line: rgba(255,255,255,.16); --bd-teal: #1a9fc0;
  position: relative; margin-top: 3rem; border-radius: 22px; overflow: hidden;
  background: #e8edf2; box-shadow: 0 50px 100px -40px rgba(20, 38, 59, .55), 0 0 0 1px rgba(20,38,59,.08);
  font-family: var(--font-head);
}
.bdemo button { font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bdemo button:focus-visible { outline: 2px solid #21c4da; outline-offset: 2px; }
.bdemo svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---- top bar ---- */
.bd-top { display: flex; align-items: center; gap: 8px; height: 54px; padding: 0 12px; background: var(--bd-navy); color: #fff; }
.bd-top__r { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.bd-pill { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 13px; border-radius: 999px; font: 600 .82rem var(--font-head); color: #fff; background: none; border: 0; white-space: nowrap; }
.bd-pill--ghost { background: rgba(255,255,255,.1); border-radius: 9px; }
.bd-pill--line { box-shadow: inset 0 0 0 1px var(--bd-line); transition: background .2s, color .2s; }
.bd-pill--line:hover { background: rgba(255,255,255,.08); }
.bd-pill--line[aria-pressed="true"] { background: #fff; color: var(--bd-navy); }
.bd-pill--round { width: 32px; padding: 0; justify-content: center; box-shadow: inset 0 0 0 1px var(--bd-line); }
.bd-title { display: flex; align-items: center; gap: 10px; min-width: 0; margin-left: 4px; }
.bd-title b { font-size: .95rem; white-space: nowrap; }
.bd-chip { font: 600 .72rem var(--font-head); padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.12); color: rgba(255,255,255,.72); white-space: nowrap; transition: background .3s, color .3s; }
.bd-chip.is-busy { color: #ffd98a; }
.bd-dev { display: flex; padding: 3px; border-radius: 999px; background: rgba(255,255,255,.12); }
.bd-dev button { width: 38px; height: 26px; border: 0; border-radius: 999px; background: none; color: rgba(255,255,255,.75); display: grid; place-items: center; transition: background .25s, color .25s; }
.bd-dev button[aria-checked="true"] { background: #fff; color: var(--bd-navy); }
.bd-status { display: inline-flex; align-items: center; gap: 6px; font: 600 .76rem var(--font-head); color: #6ee7a8; white-space: nowrap; }
.bd-status i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.bd-status.is-draft { color: #ffd98a; }
.bd-pub { height: 32px; padding: 0 16px; border: 0; border-radius: 999px; background: rgba(255,255,255,.14); color: rgba(255,255,255,.55); font: 700 .84rem var(--font-head); transition: background .3s, color .3s, transform .15s; }
.bd-pub:not(:disabled) { background: linear-gradient(120deg, #19a9bd, #21c4da); color: #fff; box-shadow: 0 6px 18px -6px rgba(33,196,218,.7); }
.bd-pub:not(:disabled):active { transform: scale(.95); }
.bd-pub:disabled { cursor: default; }

/* ---- body: drawer + canvas ---- */
.bd-body { position: relative; display: flex; height: 520px; }
.bd-canvas { position: relative; flex: 1; min-width: 0; padding: 20px; display: flex; justify-content: center; }
.bd-frame { width: 100%; max-width: 100%; height: 100%; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 18px 44px -22px rgba(20, 38, 59, .5);
  transition: max-width .7s cubic-bezier(.2, .9, .3, 1), border-radius .7s; }
.bdemo.is-phone .bd-frame { max-width: 360px; border-radius: 28px; box-shadow: 0 0 0 7px #0f1a26, 0 26px 50px -20px rgba(10,20,32,.6); }
.bd-drawer { flex: 0 0 280px; background: #fff; border-right: 1px solid #e2e8ee; display: flex; flex-direction: column; color: var(--navy); animation: bdDrawer .38s cubic-bezier(.2, .9, .3, 1); overflow: hidden; }
.bd-drawer[hidden] { display: none; }
@keyframes bdDrawer { from { margin-left: -280px; opacity: .4; } }
.bd-drawer__h { display: flex; align-items: center; justify-content: space-between; height: 52px; padding: 0 12px 0 18px; border-bottom: 1px solid #eef2f5;
  font: 800 .72rem var(--font-head); letter-spacing: .14em; text-transform: uppercase; color: #6b7a89; }
.bd-x { width: 30px; height: 30px; border: 0; border-radius: 8px; background: none; color: #6b7a89; display: grid; place-items: center; }
.bd-x:hover { background: #f1f5f8; color: var(--navy); }
.bd-drawer__b { padding: 16px 18px 20px; overflow-y: auto; }
.bd-secs__h { margin: 0 0 10px; font-size: .84rem; color: #7b8896; } .bd-secs__h b { color: var(--navy); font-size: .98rem; }
.bd-secs { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.bd-secs li { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 10px; background: #f5f8fa; font: 600 .84rem var(--font-head); color: var(--navy); }
.bd-secs li svg { color: #a7b3bf; width: 14px; height: 14px; }
.bd-secs li em { margin-left: auto; font: 500 .72rem var(--font-body); font-style: normal; color: #8b98a5; }
.bd-secs li.is-new { animation: bdRow .5s cubic-bezier(.2, 1.1, .3, 1); background: rgba(25,169,189,.12); }
@keyframes bdRow { from { opacity: 0; transform: translateY(-6px); } }
.bd-addblock { width: 100%; padding: 11px; border-radius: 10px; border: 1.5px dashed #7fcfdc; background: rgba(25,169,189,.06); color: var(--teal-deep); font: 700 .88rem var(--font-head); transition: background .2s; }
.bd-addblock:hover { background: rgba(25,169,189,.12); }
.bd-paste { width: 100%; margin-top: 8px; padding: 9px; border-radius: 10px; border: 1px solid #e2e8ee; background: #fff; color: var(--navy); font: 600 .84rem var(--font-head); }
.bd-tip { margin: 12px 0 0; font: 400 .74rem/1.45 var(--font-body); color: #8b98a5; }
.bd-note { margin: 0 0 14px; font: 400 .8rem/1.5 var(--font-body); color: #5d6a78; }
.bd-lbl { display: block; margin: 14px 0 8px; font: 800 .68rem var(--font-head); letter-spacing: .14em; text-transform: uppercase; color: #6b7a89; }
.bd-crow { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.bd-crow b { display: block; font-size: .86rem; } .bd-crow em { display: block; font: 400 .72rem var(--font-body); font-style: normal; color: #7b8896; }
.bd-sw { flex: none; width: 34px; height: 34px; border-radius: 9px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(20,38,59,.14); transition: background .4s; }
.bd-hex { margin-left: auto; font: 500 .74rem ui-monospace, Menlo, monospace; color: #5d6a78; border: 1px solid #e2e8ee; border-radius: 8px; padding: 6px 8px; }
.bd-pal { display: flex; gap: 8px; padding: 6px 0 2px 44px; }
.bd-pal button { width: 24px; height: 24px; border-radius: 50%; border: 0; background: var(--c); transition: transform .2s, box-shadow .2s; }
.bd-pal button:hover { transform: scale(1.12); }
.bd-pal button[aria-checked="true"] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--c); }
.bd-sel b { display: block; font-size: .86rem; margin-bottom: 7px; }
.bd-seg { display: flex; padding: 3px; border-radius: 10px; background: #eef2f5; }
.bd-seg button { flex: 1; padding: 7px 4px; border: 0; border-radius: 8px; background: none; color: #5d6a78; font: 600 .78rem var(--font-head); transition: background .2s, color .2s; }
.bd-seg button[aria-checked="true"] { background: #fff; color: var(--navy); box-shadow: 0 1px 4px rgba(20,38,59,.14); }

/* ---- Add a block ---- */
.bd-modal { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; padding: 20px; background: rgba(14, 26, 40, .45); animation: bdFade .25s; }
.bd-modal[hidden] { display: none; }
@keyframes bdFade { from { opacity: 0; } }
.bd-modal__card { position: relative; display: grid; grid-template-columns: 190px 1fr; width: min(820px, 100%); max-height: 100%; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 30px 70px -20px rgba(0,0,0,.45); animation: bdPop .4s cubic-bezier(.2, 1.1, .3, 1); }
@keyframes bdPop { from { opacity: 0; transform: translateY(14px) scale(.97); } }
.bd-modal__side { padding: 20px 18px; border-right: 1px solid #eef2f5; display: flex; flex-direction: column; gap: 4px; color: var(--navy); }
.bd-modal__t { font: 800 1.25rem var(--font-head); margin-bottom: 12px; }
.bd-modal__all { font: 700 .86rem var(--font-head); padding-bottom: 6px; border-bottom: 1px solid #dfe6ec; margin-bottom: 4px; }
.bd-kind { font: 500 .82rem var(--font-body); padding: 5px 8px; border-radius: 7px; color: #3b4957; }
.bd-kind.is-on { background: #eef2f5; }
.bd-modal__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 18px; overflow-y: auto; background: #f7f9fb; }
.bd-blk { border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px #e2e8ee; display: flex; flex-direction: column; }
.bd-blk__pv { height: 92px; padding: 12px; display: grid; gap: 6px; align-content: start; font-size: 0; }
.bd-blk__pv i { display: block; height: 7px; border-radius: 4px; background: #e3e9ee; }
.bd-blk__pv i.b { height: 10px; width: 60%; background: #c9d3dc; }
.bd-blk__pv .tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.bd-blk__pv .tiles span { height: 28px; border-radius: 5px; background: color-mix(in srgb, var(--ms-acc) 35%, #fff); }
.bd-blk__pv .qs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .bd-blk__pv .qs span { height: 40px; border-radius: 6px; background: color-mix(in srgb, var(--ms-acc) 14%, #fff); }
.bd-blk__f { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid #eef2f5; color: var(--navy); }
.bd-blk__f b { font-size: .86rem; } .bd-blk__f em { margin-left: auto; font: 400 .72rem var(--font-body); font-style: normal; color: #8b98a5; }
.bd-blk__f button { border: 0; border-radius: 8px; padding: 6px 11px; background: #1a9fc0; color: #fff; font: 700 .76rem var(--font-head); }
.bd-blk__f button:disabled { background: #c9d3dc; cursor: default; }
.bd-modal__x { position: absolute; top: 12px; right: 12px; }

/* ---- toast, cursor, replay ---- */
.bd-toast { position: absolute; left: 50%; bottom: 30px; transform: translate(-50%, 16px); opacity: 0; pointer-events: none; display: flex; align-items: center; gap: 10px;
  background: var(--navy); color: #fff; font: 600 .86rem var(--font-head); padding: 10px 18px 10px 11px; border-radius: 999px; box-shadow: 0 16px 40px -12px rgba(10,20,32,.6);
  transition: opacity .3s, transform .45s cubic-bezier(.2, 1.2, .3, 1); white-space: nowrap; z-index: 3; }
.bd-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.bd-tick { width: 22px; height: 22px; border-radius: 50%; background: #2e9e6b; display: grid; place-items: center; font-size: .76rem; }
.bdemo__cursor { position: absolute; left: 0; top: 0; width: 26px; height: 26px; z-index: 6; pointer-events: none; opacity: 0; transition: transform .75s cubic-bezier(.45, .05, .25, 1), opacity .3s; }
.bdemo__cursor.is-on { opacity: 1; }
.bdemo__cursor svg { width: 26px; height: 26px; fill: #fff; stroke: var(--navy); stroke-width: 1.4; stroke-linejoin: round; filter: drop-shadow(0 4px 6px rgba(0,0,0,.3)); }
.bdemo__cursor::after { content: ""; position: absolute; left: -9px; top: -9px; width: 24px; height: 24px; border-radius: 50%; background: rgba(33,196,218,.45); transform: scale(0); opacity: 0; }
.bdemo__cursor.is-tap::after { animation: bdTap .45s ease-out; }
@keyframes bdTap { 0% { transform: scale(.3); opacity: 1; } 100% { transform: scale(1.8); opacity: 0; } }
.bd-replay { position: absolute; right: 16px; bottom: 14px; z-index: 5; border: 0; border-radius: 999px; padding: 8px 14px; background: rgba(20,38,59,.82); color: #fff; font: 600 .78rem var(--font-head); opacity: 0; pointer-events: none; transition: opacity .3s; }
.bdemo.has-played .bd-replay { opacity: 1; pointer-events: auto; }

/* =================== the pretend website =================== */
.bdemo__site {
  --ms-ink: #16202b; --ms-mut: #5d6a78; --ms-soft: color-mix(in srgb, var(--ms-acc) 12%, #fff);
  --ms-hf: var(--font-head); --ms-bf: var(--font-body);
  container-type: inline-size; height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  color: var(--ms-ink); font-family: var(--ms-bf); background: #fff; transition: background .4s;
}
.bdemo[data-font="classic"] .bdemo__site { --ms-hf: Georgia, "Times New Roman", serif; --ms-bf: Georgia, serif; }
.bdemo[data-font="friendly"] .bdemo__site { --ms-hf: ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", system-ui, sans-serif; --ms-bf: ui-rounded, "SF Pro Rounded", system-ui, sans-serif; }
.bdemo__site * { transition: color .45s, background-color .45s, border-color .45s, font-size .3s; }
.ms-nav { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 18px; padding: 14px 24px; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border-bottom: 1px solid #eef1f4; }
.ms-logo { display: flex; align-items: center; gap: 8px; font: 700 .98rem var(--ms-hf); }
.ms-mark { width: 20px; height: 20px; border-radius: 6px; background: var(--ms-acc); transform: rotate(45deg) scale(.8); }
.ms-links { display: flex; gap: 16px; margin-left: auto; font-size: .8rem; color: var(--ms-mut); }
.ms-burger { display: none; margin-left: auto; width: 26px; height: 26px; border-radius: 8px; background: var(--ms-soft); position: relative; }
.ms-burger i { position: absolute; left: 7px; right: 7px; height: 2px; background: var(--ms-ink); border-radius: 2px; } .ms-burger i:first-child { top: 9px; } .ms-burger i:last-child { top: 15px; }
.ms-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 26px; align-items: center; padding: 38px 24px 30px; }
.ms-eye { display: inline-block; font: 700 .66rem var(--ms-bf); letter-spacing: .14em; text-transform: uppercase; color: var(--ms-acc); }
.ms-h { font: 800 2rem/1.08 var(--ms-hf); letter-spacing: -.02em; margin: .5rem 0 .6rem; color: var(--ms-ink); }
.bdemo[data-font="classic"] .ms-h { font-weight: 500; letter-spacing: -.01em; }
.ms-p { margin: 0; font-size: .86rem; line-height: 1.55; color: var(--ms-mut); max-width: 36ch; }
.ms-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1.1rem; }
.ms-btn { display: inline-block; font: 700 .76rem var(--ms-hf); padding: 9px 15px; border-radius: 999px; background: var(--ms-acc); color: #fff; }
.ms-btn--ghost { background: none; color: var(--ms-ink); box-shadow: inset 0 0 0 1.5px #dfe5ea; }
.ms-art { border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 3; }
.ms-art svg { display: block; width: 100%; height: 100%; }
.ms-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 0 24px 30px; }
.ms-card { display: grid; gap: 4px; padding: 16px; border-radius: 14px; background: var(--ms-soft); font-size: .78rem; color: var(--ms-mut); }
.ms-card b { font: 700 .88rem var(--ms-hf); color: var(--ms-ink); }
.ms-card__ic { width: 28px; height: 28px; border-radius: 9px; background: var(--ms-acc); opacity: .9; margin-bottom: 6px; }
.ms-ic1 { border-radius: 50%; } .ms-ic2 { border-radius: 4px 14px 4px 14px; }
.ms-sec { position: relative; margin: 0 24px 26px; padding: 22px; border-radius: 16px; border: 1px solid #eef1f4; }
.ms-sec h4 { margin: 0 0 12px; font: 700 1.05rem var(--ms-hf); }
.ms-row { display: grid; grid-template-columns: 70px 1fr auto; gap: 10px; padding: 10px 0; border-top: 1px solid #eef1f4; font-size: .82rem; }
.ms-row b { color: var(--ms-acc); font-family: var(--ms-hf); } .ms-row em { font-style: normal; color: var(--ms-mut); }
.ms-qs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ms-q { margin: 0; padding: 16px; border-radius: 12px; background: var(--ms-soft); }
.ms-q blockquote { margin: 0 0 8px; font: 600 .86rem/1.45 var(--ms-hf); }
.ms-q figcaption { font-size: .74rem; color: var(--ms-mut); }
.ms-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ms-tile { aspect-ratio: 4 / 3; border-radius: 10px; background: linear-gradient(135deg, color-mix(in srgb, var(--ms-acc) 55%, #fff), color-mix(in srgb, var(--ms-acc) 18%, #fff)); }
.ms-tile1 { background: linear-gradient(200deg, color-mix(in srgb, var(--ms-acc) 70%, #16202b), color-mix(in srgb, var(--ms-acc) 30%, #fff)); }
.ms-tile3 { background: linear-gradient(60deg, color-mix(in srgb, var(--ms-acc) 25%, #fff), color-mix(in srgb, var(--ms-acc) 65%, #fff)); }
.ms-tile5 { background: linear-gradient(160deg, color-mix(in srgb, var(--ms-acc) 45%, #16202b), color-mix(in srgb, var(--ms-acc) 55%, #fff)); }
.ms-foot { padding: 20px 24px 26px; font-size: .72rem; color: var(--ms-mut); border-top: 1px solid #eef1f4; }
.ms-x { position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.15); color: var(--ms-mut); font-size: 1rem; line-height: 1; opacity: 0; transition: opacity .2s; }
.ms-sec:hover .ms-x, .ms-sec:focus-within .ms-x { opacity: 1; }
@media (hover: none) { .ms-x { opacity: .9; } }
.ms-sec.is-new { animation: msIn .6s cubic-bezier(.2, 1.1, .3, 1); }
.ms-sec.is-out { opacity: 0; transform: scale(.96); transition: opacity .25s, transform .25s; }
@keyframes msIn { from { opacity: 0; transform: translateY(18px) scale(.97); } }

/* Editable words: a dashed outline on hover, a solid one while typing. */
.bdemo__site [data-edit] { border-radius: 4px; cursor: text; outline: 1.5px dashed transparent; outline-offset: 3px; transition: outline-color .2s; -webkit-tap-highlight-color: transparent; }
.bdemo__site [data-edit]:hover { outline-color: color-mix(in srgb, var(--ms-acc) 60%, transparent); }
.bdemo__site [data-edit].is-editing { outline: 2px solid var(--ms-acc); background: color-mix(in srgb, var(--ms-acc) 8%, transparent); }
.bdemo__site [data-edit].is-typing::after { content: ""; display: inline-block; width: 2px; height: .9em; margin-left: 2px; background: var(--ms-acc); vertical-align: -.08em; animation: bdBlink .8s steps(1) infinite; }
@keyframes bdBlink { 50% { opacity: 0; } }

/* The pretend site at phone width, from its own container size. */
@container (max-width: 520px) {
  .ms-links { display: none; } .ms-burger { display: block; }
  .ms-nav { padding: 12px 16px; }
  .ms-hero { grid-template-columns: 1fr; padding: 26px 16px 22px; gap: 18px; }
  .ms-h { font-size: 1.6rem; }
  .ms-cards { grid-template-columns: 1fr; padding: 0 16px 24px; }
  .ms-sec { margin: 0 16px 20px; padding: 18px; }
  .ms-qs { grid-template-columns: 1fr; }
  .ms-row { grid-template-columns: 58px 1fr; } .ms-row em { grid-column: 2; }
}


/* ---- on a phone: the editor's own compact bar, drawers as sheets ---- */
@media (max-width: 860px) {
  .bdemo { border-radius: 18px; }
  .bd-hide-s { display: none; }
  .bd-top { gap: 6px; padding: 0 8px; }
  .bd-pill { padding: 0 10px; }
  .bd-title { margin-left: 2px; } .bd-title b { font-size: .86rem; } .bd-chip { display: none; }
  .bd-status span { display: none; }
  .bd-pub { padding: 0 12px; }
  .bd-body { height: 500px; }
  .bd-canvas { padding: 12px; }
  .bdemo.is-phone .bd-frame { max-width: 290px; }
  .bd-drawer { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; max-height: 72%; border-right: 0; border-radius: 18px 18px 0 0; box-shadow: 0 -18px 40px -10px rgba(10,20,32,.35); animation: bdSheet .4s cubic-bezier(.2, .9, .3, 1); }
  @keyframes bdSheet { from { transform: translateY(100%); } }
  .bd-modal { padding: 10px; align-items: end; }
  .bd-modal__card { grid-template-columns: 1fr; max-height: 92%; }
  .bd-modal__side { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; padding: 16px 16px 10px; border-right: 0; border-bottom: 1px solid #eef2f5; }
  .bd-modal__t { flex-basis: 100%; margin: 0 0 4px; }
  .bd-modal__all, .bd-lbl { display: none; }
  .bd-kind { background: #f1f5f8; }
  .bd-modal__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) { .bd-title { display: none; } .bd-top__r { margin-left: auto; } }
@media (max-width: 400px) { .bd-status { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .bd-frame, .bdemo__cursor, .bd-toast, .bdemo__site *, .bd-drawer, .bd-modal, .bd-modal__card { transition: none; animation: none; }
  .ms-sec.is-new { animation: none; }
}