/* Shared editor UI for the a-editorial theme — admin login, inline text edit,
   image replace/gallery management, and the public lightbox. Relies on the
   --ink/--accent/--muted/--line/--paper custom properties already defined by
   each page's own <style> block. */

/* ── Quiet corner trigger — deliberately low-contrast; visitors shouldn't notice it */
.editor-fab{
  position:fixed; right:18px; bottom:18px; z-index:800;
  width:30px; height:30px; border-radius:50%; border:none;
  background:rgba(34,29,25,.06); color:var(--ink); font-size:13px;
  cursor:pointer; opacity:.35; transition:opacity .15s ease, background .15s ease;
}
.editor-fab:hover, .editor-fab:focus-visible{ opacity:1; background:rgba(34,29,25,.12); }
body.editor-admin-mode .editor-fab{ display:none; }

/* ── Login overlay ── */
.editor-overlay{
  display:none; position:fixed; inset:0; background:rgba(34,29,25,.55);
  align-items:center; justify-content:center; z-index:1000;
}
.editor-overlay.open{ display:flex; }
.editor-overlay-card{
  background:var(--paper); border-radius:8px; padding:32px; width:min(320px,90vw);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.4); font-family:'Inter',sans-serif;
}
.editor-overlay-card .editor-label{ font-size:12px; color:var(--muted); margin-bottom:14px; letter-spacing:.03em; }
.editor-overlay-card input{
  width:100%; padding:10px 12px; font-size:15px; border:1px solid var(--line); border-radius:5px;
  box-sizing:border-box; font-family:inherit;
}
.editor-overlay-card .editor-row{ display:flex; gap:8px; margin-top:16px; }
.editor-btn{
  font:inherit; font-size:13px; padding:9px 16px; border-radius:999px; cursor:pointer;
  border:1px solid var(--ink); background:var(--ink); color:var(--paper);
}
.editor-btn.ghost{ background:transparent; color:var(--ink); }
.editor-overlay-card .editor-error{ color:#b3392c; font-size:12px; margin-top:10px; min-height:14px; }

/* ── Admin mode status bar ── */
.editor-statusbar{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:900;
  background:var(--ink); color:var(--paper); font-family:'Inter',sans-serif; font-size:13px;
  padding:12px 20px; align-items:center; justify-content:space-between;
}
body.editor-admin-mode .editor-statusbar{ display:flex; }
.editor-statusbar button{
  font:inherit; font-size:12px; background:none; border:1px solid rgba(255,255,255,.4);
  color:var(--paper); border-radius:999px; padding:6px 14px; cursor:pointer;
}

/* ── Inline text editing ── */
body.editor-admin-mode [data-field]{ position:relative; cursor:text; border-radius:2px; }
body.editor-admin-mode [data-field]:hover{ outline:1px dashed var(--accent); outline-offset:4px; }
body.editor-admin-mode [data-field].editing{ outline:2px solid var(--accent); outline-offset:4px; }

/* ── Fixed single-image slots ── */
body.editor-admin-mode [data-image-slot]{ position:relative; }
.editor-swap-btn{
  display:none; position:absolute; inset:0; align-items:center; justify-content:center;
  background:rgba(34,29,25,.55); color:#fff; font-family:'Inter',sans-serif; font-size:13px;
  letter-spacing:.03em; cursor:pointer; z-index:5;
}
body.editor-admin-mode [data-image-slot]:hover .editor-swap-btn{ display:flex; }

/* ── Gallery slots ── */
.editor-gallery-item{ position:relative; }
.editor-gallery-controls{
  display:none; position:absolute; top:8px; right:8px; gap:6px; z-index:5;
}
body.editor-admin-mode .editor-gallery-item:hover .editor-gallery-controls{ display:flex; }
.editor-gallery-controls button{
  font-family:'Inter',sans-serif; font-size:11px; padding:5px 10px; border-radius:999px; cursor:pointer;
  border:none; background:rgba(34,29,25,.85); color:#fff;
}
.editor-gallery-controls button.danger{ background:#b3392c; }
.editor-gallery-item[draggable="true"]{ cursor:grab; }
.editor-gallery-item.dragging{ opacity:.4; }

.editor-add-tile{
  display:none; align-items:center; justify-content:center; min-height:120px;
  border:2px dashed var(--line); border-radius:6px; color:var(--muted);
  font-family:'Inter',sans-serif; font-size:13px; cursor:pointer;
}
body.editor-admin-mode .editor-add-tile{ display:flex; }
.editor-add-tile:hover{ border-color:var(--accent); color:var(--accent); }

/* ── Lightbox ── */
.editor-lightbox{
  display:none; position:fixed; inset:0; z-index:1100; background:#0f0c0a;
  align-items:center; justify-content:center; touch-action:none;
}
.editor-lightbox.open{ display:flex; }
.editor-lightbox-stage{
  position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.editor-lightbox-stage img{
  max-width:90vw; max-height:85vh; box-shadow:0 30px 80px rgba(0,0,0,.5); border-radius:4px;
  cursor:grab; user-select:none; transition:transform .06s ease-out;
}
.editor-lightbox-close, .editor-lightbox-prev, .editor-lightbox-next{
  position:absolute; background:rgba(255,255,255,.08); color:#fff; border:none; border-radius:999px;
  cursor:pointer; font-size:20px; width:44px; height:44px; display:flex; align-items:center; justify-content:center;
}
.editor-lightbox-close:hover, .editor-lightbox-prev:hover, .editor-lightbox-next:hover{ background:rgba(255,255,255,.2); }
.editor-lightbox-close{ top:20px; right:20px; }
.editor-lightbox-prev{ left:20px; top:50%; transform:translateY(-50%); }
.editor-lightbox-next{ right:20px; top:50%; transform:translateY(-50%); }
.editor-lightbox-caption{
  position:absolute; bottom:24px; left:0; right:0; text-align:center; color:#e8e2d8;
  font-family:'Inter',sans-serif; font-size:13px; letter-spacing:.02em;
}
.editor-lightbox-hint{
  position:absolute; top:20px; left:20px; color:rgba(255,255,255,.5); font-family:'Inter',sans-serif; font-size:11px;
}

@media (max-width:640px){
  .editor-lightbox-prev, .editor-lightbox-next{ width:38px; height:38px; font-size:16px; }
}

/* ── Structured sections/blocks (rendered content, not static markup) ── */
body.editor-admin-mode [data-block-id]{ position:relative; cursor:text; border-radius:2px; }
body.editor-admin-mode [data-block-id]:hover{ outline:1px dashed var(--accent); outline-offset:4px; }
body.editor-admin-mode [data-block-id].editing{ outline:2px solid var(--accent); outline-offset:4px; }

.block-wrap{ position:relative; }
.block-wrap[draggable="true"]{ cursor:grab; }
.block-wrap.dragging{ opacity:.4; }

.editor-block-toolbar{
  display:none; position:absolute; top:-14px; right:0; gap:6px; z-index:6;
}
body.editor-admin-mode .block-wrap:hover .editor-block-toolbar{ display:flex; }
.editor-block-toolbar button{
  font-family:'Inter',sans-serif; font-size:13px; width:24px; height:24px; border-radius:999px; cursor:pointer;
  border:none; background:rgba(34,29,25,.85); color:#fff; line-height:1; padding:0;
}
.editor-block-toolbar button.danger{ background:#b3392c; }

.editor-type-menu{
  position:absolute; top:14px; right:0; z-index:20; background:var(--paper);
  border:1px solid var(--line); border-radius:6px; box-shadow:0 12px 30px -10px rgba(0,0,0,.3);
  display:flex; flex-direction:column; min-width:150px; overflow:hidden;
}
.editor-type-menu button{
  font-family:'Inter',sans-serif; font-size:13px; padding:9px 14px; text-align:left; background:none;
  border:none; cursor:pointer; color:var(--ink);
}
.editor-type-menu button:hover{ background:rgba(34,29,25,.06); }

body.editor-admin-mode .section{ position:relative; }
.section[draggable="true"]{ cursor:grab; }
.section.dragging{ opacity:.4; }
.editor-section-controls{
  display:none; position:absolute; top:-16px; left:0; gap:6px; z-index:6;
}
body.editor-admin-mode .section:hover > .editor-section-controls{ display:flex; }
.editor-section-controls button{
  font-family:'Inter',sans-serif; font-size:11px; padding:5px 10px; border-radius:999px; cursor:pointer;
  border:none; background:#b3392c; color:#fff;
}

.editor-add-section-btn{
  display:none; width:100%; margin:24px 0; padding:16px; border:2px dashed var(--line); border-radius:6px;
  background:none; color:var(--muted); font-family:'Inter',sans-serif; font-size:14px; cursor:pointer;
}
body.editor-admin-mode .editor-add-section-btn{ display:block; }
.editor-add-section-btn:hover{ border-color:var(--accent); color:var(--accent); }