/* Visual editor UI — only visible when edit.js activates (localhost). */

/* ---- floating icon toolbar (top-right) ---------------------------------- */
#editbar {
  position: fixed; top: 12px; right: 14px; z-index: 9999;
  display: flex; gap: 8px; align-items: center;
  font: 12px/1 -apple-system, Segoe UI, sans-serif;
}
#editbar #ed-tools { display: inline-flex; gap: 8px; align-items: center; }
.ed-fab {
  width: 38px; height: 38px; border-radius: 50%;
  background: #1b1b1b; color: #fff; border: 1px solid #3a3a3a;
  font-size: 16px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.3); transition: background .12s, transform .08s;
}
.ed-fab:hover { background: #2c2c2c; transform: translateY(-1px); }
.ed-fab:active { transform: translateY(0); }
#editbar #ed-toggle { background: #2f6df0; border-color: #2f6df0; }
#editbar .ed-primary { background: #1f9d55; border-color: #1f9d55; }
#ed-status { color: #888; font-style: italic; margin-left: 2px; white-space: nowrap; }

/* ---- editable text affordance ------------------------------------------ */
body.editing .ed-text { outline: 1px dashed rgba(120,160,255,.6); outline-offset: 3px; min-width: 12px; border-radius: 2px; }
body.editing .ed-text:hover { background: rgba(47,109,240,.06); }
body.editing .ed-text:focus { outline: 1px solid #2f6df0; background: rgba(47,109,240,.10); }
body.editing .project-head h1:empty::before,
body.editing .project-desc p:empty::before { content: "✎ click to add text"; color: #888; font-style: italic; }
.project-head h1:empty, .project-desc p:empty { display: none; }
body.editing .project-head h1:empty, body.editing .project-desc p:empty { display: block; }

/* ---- works page: inline controls on each preview ----------------------- */
.ed-cardtools { position: absolute; top: 6px; right: 6px; z-index: 6; display: none; gap: 5px; }
body.editing .scatter-card .ed-cardtools { display: flex; }
body.editing .scatter-card { outline: 1px dashed rgba(120,160,255,.4); outline-offset: 2px; }
.ed-mini {
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(20,20,20,.82); color: #fff; border: 1px solid #888;
  font-size: 13px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.ed-mini[data-a=edit]:hover { background: #2f6df0; border-color: #2f6df0; }
.ed-mini[data-a=del]:hover, .ed-mini[data-a=del] + *:hover { background: #c33; border-color: #c33; }
.ed-mini.ed-grip { cursor: grab; font-size: 11px; }

/* ---- popover (card editor / videos) ------------------------------------ */
.ed-pop {
  position: absolute; z-index: 10000; width: 256px;
  background: #181818; border: 1px solid #383838; border-radius: 9px; padding: 12px;
  box-shadow: 0 10px 34px rgba(0,0,0,.55); font: 12px sans-serif; color: #ddd;
}
.ed-pop label { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; color: #9a9a9a; }
.ed-pop .ed-pop2 { display: flex; gap: 8px; }
.ed-pop .ed-pop2 label { flex: 1; }
.ed-pop input, .ed-pop textarea {
  background: #0e0e0e; border: 1px solid #333; color: #eee; padding: 7px 8px; border-radius: 5px; font: 13px sans-serif; width: 100%;
}
.ed-pop textarea { font: 12px monospace; resize: vertical; }
.ed-poprow { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.ed-poprow .ed-open { color: #5a9bff; text-decoration: none; margin-left: auto; }
.ed-poprow .ed-open:hover { text-decoration: underline; }
.ed-pop .ed-x { background: #2f6df0; border: 0; color: #fff; padding: 6px 12px; border-radius: 5px; cursor: pointer; }
.ed-pop .ed-up { background: #242424; border: 1px solid #444; color: #ddd; padding: 6px 10px; border-radius: 5px; cursor: pointer; font-size: 14px; }
.ed-pop .ed-up:hover { background: #303030; }

/* ---- project page: control strip + add-images tile --------------------- */
#ed-projbar {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center;
  background: #141414; border: 1px solid #2a2a2a; border-radius: 10px;
  padding: 10px 14px; margin: 0 auto 26px; max-width: 720px;
  font: 13px sans-serif; color: #ccc;
}
.ed-stepper { display: inline-flex; align-items: center; gap: 6px; }
.ed-stepper button {
  width: 26px; height: 26px; border-radius: 6px; background: #242424; border: 1px solid #444; color: #fff; cursor: pointer; font-size: 15px; line-height: 1;
}
.ed-stepper button:hover { background: #303030; }
.ed-stepper b { min-width: 16px; text-align: center; }
.ed-steplbl { color: #888; }
.ed-textbtn {
  background: #1b1b1b; border: 1px solid #3a3a3a; color: #ddd; padding: 7px 12px; border-radius: 7px; cursor: pointer; font: 13px sans-serif;
}
.ed-textbtn:hover { background: #2a2a2a; }
.ed-danger { background: #3a1414; border-color: #803030; color: #f0a0a0; }
.ed-danger:hover { background: #4a1a1a; }

/* layout boxes (Adobe-style): invisible when viewing, dashed + controls in edit mode */
body.editing #pmedia .pblock { outline: 1px dashed rgba(106,140,255,.45); outline-offset: 8px; margin: 0 0 34px; padding-top: 2px; }
.ed-blockbar { display: flex; gap: 14px; align-items: center; justify-content: center; margin: 0 0 10px; font: 13px sans-serif; color: #ccc; }
.ed-blockbar .ed-blockdel { background: #2a1414; border: 1px solid #6a2c2c; color: #e9a0a0; border-radius: 6px; padding: 4px 10px; cursor: pointer; }
.ed-blockbar .ed-blockdel:hover { background: #3a1a1a; }

.ed-addtile {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 120px; margin-top: var(--gap, 10px);
  border: 2px dashed #6a8cff; border-radius: 8px; color: #6a8cff;
  font-size: 34px; cursor: pointer; background: rgba(106,140,255,.05);
}
.ed-addtile:hover { background: rgba(106,140,255,.12); }

/* ---- per-image tools (★ cover, ✕ delete, ⋮⋮ drag) ---------------------- */
body.editing #pmedia .media { cursor: grab; outline: 1px dashed rgba(120,160,255,.35); }
.ed-imgtools { position: absolute; top: 6px; right: 6px; z-index: 5; display: flex; gap: 4px; }
.ed-imgtools .ed-mini[data-a=cov]:hover { background: #2f6df0; border-color: #2f6df0; }
.ed-imgtools .ed-mini[data-a=del]:hover { background: #c33; border-color: #c33; }

/* ---- phone preview (small, docked bottom-right; page stays usable) ------ */
#ed-phone-wrap { position: fixed; right: 10px; bottom: 10px; z-index: 10001; pointer-events: none; }
#ed-phone {
  width: 390px; height: 844px; background: #111; border-radius: 42px; padding: 14px;
  box-shadow: 0 24px 70px rgba(0,0,0,.5); transform-origin: bottom right; pointer-events: auto;
}
#ed-phone iframe { width: 100%; height: 100%; border: 0; border-radius: 30px; background: #fff; display: block; }
#ed-phone-close {
  position: fixed; right: 10px; width: 34px; height: 34px; border-radius: 50%;
  background: #1b1b1b; color: #fff; border: 1px solid #444; font-size: 15px; cursor: pointer; pointer-events: auto;
}

/* ---- sheets (3D objects / site settings) ------------------------------- */
.ed-sheet {
  position: fixed; top: 58px; right: 14px; z-index: 9999; width: 320px;
  background: #161616; border: 1px solid #333; border-radius: 10px; padding: 14px 16px;
  font: 13px sans-serif; color: #ddd; box-shadow: 0 10px 34px rgba(0,0,0,.55);
}
.ed-sheet h4 { margin: 0 0 6px; font-weight: 600; }
.ed-sheet .ss-note { color: #777; font-size: 11px; font-style: italic; margin: 0 0 12px; }
.ed-sheet label { display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; color: #9a9a9a; font-size: 12px; }
.ed-sheet input, .ed-sheet select { background: #0e0e0e; border: 1px solid #333; color: #eee; padding: 7px 8px; border-radius: 5px; font: 13px sans-serif; }
.ed-sheet .ed-x { background: #2f6df0; border: 0; color: #fff; padding: 7px 14px; border-radius: 6px; cursor: pointer; }