/* pageeditor.css — in-app page editor (Option B). Operator (RelayLeads) chrome;
   the tenant accent lives only inside the preview iframe, never here. */

.pe-card{ display:flex; flex-direction:column; height:100%; min-height:0; }

/* The overlay + drawers set display:flex, which otherwise DEFEATS the [hidden]
   attribute (equal specificity → display:flex wins), so `el.hidden = true` never
   hid them. Force hidden to win. This was the "stuck on Loading your site…" bug. */
.pe-card [hidden]{ display:none !important; }

/* Header row: back · title(grows) · Layout · Publish. The buttons are .l-btn,
   which defaults to width:100% + a .l-btn+.l-btn top-margin (built for stacked
   button lists) — both wrong in a flex row. Override to inline, content-sized. */
.pe-card .layer-head{ align-items:center; }
.pe-layout-btn, .pe-publish{
  flex:0 0 auto; width:auto; margin:0; padding:8px 15px;
  font-size:.82rem; white-space:nowrap;
}
.pe-card .layer-head .l-btn + .l-btn{ margin-top:0; }
.pe-publish:disabled{ opacity:.45; }
/* Let the title/sub shrink + ellipsize instead of shoving the buttons off-screen. */
.pe-card .layer-title, .pe-card .layer-sub{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:560px){
  .pe-card .layer-sub{ display:none; }              /* keep the header compact on phones */
  .pe-layout-btn, .pe-publish{ padding:8px 12px; font-size:.78rem; }
}

/* Preview stage — the live customer render fills it; status overlays it. */
.pe-stage{ position:relative; flex:1; min-height:0; background:var(--panel,#0e1626); overflow:hidden; }
.pe-frame{ position:absolute; inset:0; width:100%; height:100%; border:0; background:#fff; }

.pe-status{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  padding:24px; text-align:center; background:var(--panel,#0e1626);
  color:var(--muted2,#9aa); font-size:.86rem; line-height:1.5;
}
.pe-status-inner{ max-width:320px; }

/* Bottom-sheet drawers (copy edit + media library). Absolutely docked to the
   bottom of the card; scroll internally. */
.pe-drawer, .pe-media{
  position:absolute; left:0; right:0; bottom:0; z-index:5;
  background:var(--card,#111b2e); border-top:1px solid var(--border,#2a3550);
  box-shadow:0 -10px 30px rgba(0,0,0,.35);
  padding:14px 16px calc(16px + env(safe-area-inset-bottom));
  animation:pe-rise .18s ease;
}
.pe-media{ max-height:62%; display:flex; flex-direction:column; }
@keyframes pe-rise{ from{ transform:translateY(12px); opacity:0; } to{ transform:none; opacity:1; } }

.pe-drawer-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.pe-drawer-title{ font-weight:700; font-size:.95rem; color:var(--text,#e8edf6); }
.pe-drawer-x{
  border:0; background:transparent; color:var(--muted2,#9aa);
  font-size:1.5rem; line-height:1; cursor:pointer; padding:2px 6px;
}

.pe-textarea{
  width:100%; resize:vertical; min-height:64px; font:inherit;
  color:var(--text,#e8edf6); background:transparent;
  border:1px solid var(--border,#2a3550); border-radius:10px; padding:10px 12px;
}
.pe-drawer-foot{ display:flex; justify-content:flex-end; gap:10px; margin-top:12px; }
.pe-drawer-foot .l-btn{ margin:0; width:auto; padding:9px 18px; }

/* Media library */
.pe-media-actions{ display:flex; align-items:center; gap:12px; margin-bottom:12px; flex-wrap:wrap; }
.pe-media-actions .l-btn{ margin:0; width:auto; padding:8px 16px; cursor:pointer; }
.pe-media-note{ font-size:.72rem; color:var(--muted2,#9aa); }
.pe-media-grid{
  overflow-y:auto; display:grid; gap:10px; padding-bottom:4px;
  grid-template-columns:repeat(auto-fill, minmax(96px, 1fr));
}
.pe-tile{ position:relative; aspect-ratio:1; }
.pe-tile-pick{
  width:100%; height:100%; padding:0; border:1px solid var(--border,#2a3550);
  border-radius:10px; overflow:hidden; background:var(--panel,#0e1626); cursor:pointer;
}
.pe-tile-pick img{ width:100%; height:100%; object-fit:cover; display:block; }
.pe-tile-pick:hover{ border-color:var(--accent,#e5b567); }
.pe-tile-del{
  position:absolute; top:4px; right:4px; width:22px; height:22px; border:0; border-radius:50%;
  background:rgba(0,0,0,.6); color:#fff; font-size:1rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.pe-empty{ grid-column:1/-1; padding:24px; text-align:center; color:var(--muted2,#9aa); font-size:.84rem; }

/* Layout manager (reorder / show-hide) */
.pe-layout{ max-height:62%; display:flex; flex-direction:column; }
.pe-layout-list{ overflow-y:auto; display:flex; flex-direction:column; gap:8px; }
.pe-lrow{
  display:flex; align-items:center; gap:12px; padding:8px 10px;
  border:1px solid var(--border,#2a3550); border-radius:10px; background:var(--panel,#0e1626);
}
.pe-lrow.is-hidden{ opacity:.55; }
.pe-lmove{ display:flex; flex-direction:column; gap:2px; }
.pe-lbtn{
  border:0; background:transparent; color:var(--muted2,#9aa); cursor:pointer;
  font-size:.7rem; line-height:1; padding:2px 4px;
}
.pe-lbtn:disabled{ opacity:.3; cursor:default; }
.pe-lname{ flex:1; min-width:0; font-weight:600; font-size:.9rem; color:var(--text,#e8edf6); }
.pe-leye{
  flex:none; border:1px solid var(--border,#2a3550); border-radius:999px;
  background:transparent; color:var(--text,#e8edf6); font-size:.72rem; font-weight:700;
  padding:5px 12px; cursor:pointer;
}
.pe-leye.off{ color:var(--muted2,#9aa); }