/* ===== ManaKlade Cover Designer — canvas render chrome (Phase 5b) ===== */
/* All rules scoped under .mk-designer; tokens declared here, not :root,
   so they never collide with the theme's body.mk-modern token set. */
.mk-designer{
  --teal:#1b7a8c;
  --teal-deep:#0f5666;
  --green:#5f9e43;
  --green-bright:#73a550;
  --grad:linear-gradient(100deg,#0f5666 0%,#1b7a8c 42%,#5f9e43 100%);
  --grad-hover:linear-gradient(100deg,#0c4a57 0%,#176b7c 42%,#54923a 100%);
  --ink:#1a1a1a; --ink-2:#333; --muted:#666; --faint:#9a9a96;
  --line:#e7e6e1; --line-2:#efeee9; --panel:#fff;
  --workspace:#eceae4; --workspace-2:#e3e0d8; --chip:#f5f4ef; --chip-hover:#eceae3;
  --sel:#1b7a8c; --sel-soft:rgba(27,122,140,.14); --danger:#c0473f;
  --radius:10px; --radius-sm:7px;
  --shadow-sm:0 1px 2px rgba(20,20,20,.06),0 1px 3px rgba(20,20,20,.05);
  --shadow-md:0 4px 14px rgba(20,20,20,.08),0 2px 6px rgba(20,20,20,.05);
  --shadow-lg:0 18px 44px rgba(20,20,20,.16);
  font-family:'Rubik',system-ui,sans-serif;
}
.mk-designer *{box-sizing:border-box;}
.mk-designer button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}

/* canvas / workspace */
.mk-designer .canvas-wrap{
  flex:1;position:relative;overflow:hidden;
  background:#fff;
  display:flex;align-items:center;justify-content:center;
  /* reserve room for the top bar / bottom hint only (thumbnails removed) */
  padding:78px 30px 56px;
}
/* the Leto theme forces button{height:55px}; reset inside the designer so the
   face toggle / tab chips size to their own padding (components with an explicit
   height — tool-btn, dp-tool, cart-btn — keep it via higher specificity). */
.mk-designer button{height:auto;}
.mk-designer .stage{position:relative;transform-origin:center center;}

.mk-designer .cover{position:relative;overflow:hidden;box-shadow:var(--shadow-lg);border-radius:3px 9px 9px 3px;}
/* transparent cutout: no box-shadow (it would render as a rectangle, not the
   notebook shape); the PNG already has its own soft edge depth */
.mk-designer .cover.has-photo{box-shadow:none;border-radius:0;}
.mk-designer .cover-sheen{position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(105deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 22%, rgba(255,255,255,0) 78%, rgba(0,0,0,.05) 100%);}
.mk-designer .cover-vignette{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 70px rgba(0,0,0,.08), inset 0 0 1px rgba(0,0,0,.25);border-radius:inherit;}
.mk-designer .spine-shadow{position:absolute;top:0;bottom:0;left:0;width:46px;pointer-events:none;z-index:2;
  background:linear-gradient(90deg, rgba(0,0,0,.16) 0%, rgba(0,0,0,.06) 40%, transparent 100%);}

/* realistic twin-loop wire binding */
.mk-designer .spiral{position:absolute;top:0;bottom:0;left:0;width:38px;z-index:62;pointer-events:none;
  display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:26px 0;}
.mk-designer .ring{position:relative;width:38px;height:13px;}
.mk-designer .ring::before{content:"";position:absolute;top:50%;left:23px;transform:translateY(-50%);
  width:7px;height:9px;border-radius:50%;
  background:radial-gradient(ellipse at 50% 30%, rgba(0,0,0,.42), rgba(0,0,0,.26));
  box-shadow:inset 0 1px 2px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.5);}
.mk-designer .ring::after{content:"";position:absolute;top:50%;left:-6px;transform:translateY(-50%) rotate(-24deg);
  width:38px;height:8px;border-radius:5px;
  background:linear-gradient(178deg,#ffffff 0%,#e3e4e8 26%,#b6b7bd 52%,#85868d 78%,#5f6066 100%);
  box-shadow:0 1px 2px rgba(0,0,0,.4), 0 0 0 .5px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1.5px 1px rgba(0,0,0,.32);}

/* guides */
.mk-designer .guide{position:absolute;pointer-events:none;z-index:55;}
.mk-designer .guide.safe{border:1px dashed rgba(27,122,140,.6);}
.mk-designer .guide.bleed{border:1px solid rgba(192,71,63,.45);}
.mk-designer .guide-label{position:absolute;top:-9px;left:8px;font-size:9px;font-weight:600;letter-spacing:.04em;
  background:var(--workspace);padding:0 5px;color:var(--teal);text-transform:uppercase;}
.mk-designer .snap-line{position:absolute;background:var(--teal);z-index:70;pointer-events:none;}

/* elements layer */
.mk-designer .elements{position:absolute;inset:0;z-index:50;}
.mk-designer .el{position:absolute;will-change:transform;cursor:move;}
.mk-designer .el.locked{cursor:not-allowed;}
.mk-designer .el-text{display:flex;width:100%;height:100%;word-break:break-word;white-space:pre-wrap;overflow:hidden;}
.mk-designer .el-text[contenteditable="true"]{outline:none;cursor:text;}
.mk-designer .el-img{width:100%;height:100%;display:block;pointer-events:none;}

/* selection box + handles */
.mk-designer .sel-box{position:absolute;z-index:80;pointer-events:none;}
.mk-designer .sel-box .frame{position:absolute;inset:0;border:1.5px solid var(--sel);box-shadow:0 0 0 1px rgba(255,255,255,.5);}
.mk-designer .handle{position:absolute;width:11px;height:11px;background:#fff;border:1.5px solid var(--sel);border-radius:2px;pointer-events:auto;z-index:82;}
.mk-designer .handle.nw{left:-6px;top:-6px;cursor:nwse-resize;}
.mk-designer .handle.ne{right:-6px;top:-6px;cursor:nesw-resize;}
.mk-designer .handle.sw{left:-6px;bottom:-6px;cursor:nesw-resize;}
.mk-designer .handle.se{right:-6px;bottom:-6px;cursor:nwse-resize;}
.mk-designer .handle.n{left:50%;top:-6px;transform:translateX(-50%);cursor:ns-resize;}
.mk-designer .handle.s{left:50%;bottom:-6px;transform:translateX(-50%);cursor:ns-resize;}
.mk-designer .handle.w{left:-6px;top:50%;transform:translateY(-50%);cursor:ew-resize;}
.mk-designer .handle.e{right:-6px;top:50%;transform:translateY(-50%);cursor:ew-resize;}
.mk-designer .handle.rotate{left:50%;transform:translateX(-50%);cursor:grab;border-radius:50%;background:var(--sel);}
.mk-designer .handle.rotate:active{cursor:grabbing;}
.mk-designer .rotate-stem{position:absolute;left:50%;width:1.5px;background:var(--sel);transform:translateX(-50%);pointer-events:none;}

/* face thumbs bottom-left */
.mk-designer .face-mini{position:absolute;left:18px;bottom:18px;z-index:30;display:flex;gap:10px;}
.mk-designer .face-mini .fm{background:#fff;border-radius:8px;padding:6px;box-shadow:var(--shadow-md);cursor:pointer;border:2px solid transparent;}
.mk-designer .face-mini .fm.on{border-color:var(--teal);}
.mk-designer .face-mini .fm .fm-cover{border-radius:3px;position:relative;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.05);}
.mk-designer .face-mini .fm .fm-label{font-size:10px;font-weight:600;color:var(--muted);text-align:center;margin-top:4px;}