/* ===================================================================
   PostGrid — editor-specific stylesheet (used only by index.html)
   Relies on CSS variables defined in site.css, loaded first.
   =================================================================== */

:root{ --spacing-px:6px; --radius-px:0px; }

.tool-wrap{max-width:1280px; margin:0 auto; padding:24px 20px 10px;}
.tool-hero{margin-bottom:18px;}
.tool-hero h1{
  font-family:'Anton',sans-serif; font-weight:400; font-size:clamp(24px,3.6vw,38px);
  margin:0 0 8px; letter-spacing:0.01em; text-transform:uppercase;
}
.tool-hero h1 span{color:var(--flash);}
.tool-hero p{color:var(--paper-dim); font-size:14px; line-height:1.6; max-width:640px;}
.tool-hero p b{color:var(--mint); font-style:normal;}

/* ---------- editor layout: sticky preview + independently scrolling panel ---------- */
.layout{display:grid; grid-template-columns:1fr 360px; gap:22px; align-items:start;}
@media (min-width:921px){
  .stage{position:sticky; top:16px;}
  .panel{position:sticky; top:16px; max-height:calc(100vh - 32px); overflow-y:auto;}
}
@media (max-width:920px){
  .layout{grid-template-columns:1fr;}
  /* Keep the preview pinned near the top of the screen while the controls
     below it scroll, so edits are visible without scrolling back up. */
  .stage{
    position:sticky; top:0; z-index:40;
    max-height:58vh; overflow-y:auto;
    box-shadow:0 10px 18px -10px rgba(0,0,0,0.55);
  }
}
@media (max-width:480px){
  .stage{max-height:52vh;}
  #uploadZone{min-height:220px; padding:20px;}
}

.stage{background:var(--panel); border:1px solid var(--line); padding:20px; border-radius:6px;}
.stage-label{font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--paper-dim); display:flex; justify-content:space-between; margin-bottom:14px;}
.canvas-tool-btn{
  background:var(--panel-2); border:1px solid var(--line); color:var(--paper);
  font-family:'Inter',sans-serif; font-weight:600; font-size:11px; letter-spacing:0;
  text-transform:none; padding:5px 9px; border-radius:4px; cursor:pointer;
}
.canvas-tool-btn:hover:not(:disabled){border-color:var(--flash); color:var(--flash);}
.canvas-tool-btn:disabled{opacity:.35; cursor:not-allowed;}
#selectedPanel.flash-highlight{
  animation: selHighlight 900ms ease-out;
  border-radius:6px;
}
@keyframes selHighlight{
  0%{ box-shadow:0 0 0 2px var(--flash) inset; background:rgba(255,111,145,0.12); }
  100%{ box-shadow:0 0 0 0 transparent; background:transparent; }
}

#uploadZone{border:1px dashed var(--line); min-height:320px; display:flex; align-items:center; justify-content:center; text-align:center; cursor:pointer; padding:30px; border-radius:6px; transition:.15s;}
#uploadZone.drag{border-color:var(--flash); background:rgba(255,111,145,.06);}
#uploadZone .hint{color:var(--paper-dim); font-size:13px; line-height:1.8;}
#uploadZone .hint b{color:var(--paper); font-weight:600; border-bottom:1px solid var(--flash);}
input[type=file]{display:none;}

#board{position:relative; width:100%; display:none; background:#000; overflow:hidden; border-radius:4px;}
#board.active{display:block;}
.media-layer{position:absolute; overflow:hidden;}
.seam-bar{position:absolute; z-index:4; background:transparent; transition:background .1s ease;}
.seam-bar:hover, .seam-bar:active{background:rgba(255,111,145,0.55);}
.seam-v{top:0; bottom:0; width:14px; margin-left:-7px; cursor:col-resize;}
.seam-h{left:0; right:0; height:14px; margin-top:-7px; cursor:row-resize;}
.cell{position:absolute;}
.cell-inner{position:absolute; overflow:hidden; background:var(--panel-2); display:flex; align-items:center; justify-content:center;}
.cell-inner.empty{border:1px dashed var(--line); cursor:pointer;}
.cell-inner.empty:hover{border-color:var(--flash);}
.cell-inner.selected{outline:2px solid var(--flash); outline-offset:-2px;}
.cell-inner img{width:100%; height:100%; object-fit:cover; -webkit-user-drag:none; user-select:none; touch-action:none; cursor:grab;}
.cell-inner img:active{cursor:grabbing;}
.empty-plus{color:var(--paper-dim); font-size:22px;}
.cell-btn{position:absolute; top:6px; width:22px; height:22px; background:rgba(23,18,32,0.75); border:1px solid rgba(245,242,248,0.3); color:var(--paper); display:flex; align-items:center; justify-content:center; font-size:11px; cursor:pointer; border-radius:3px; z-index:2;}
.cell-btn.drag{right:6px; cursor:grab;}
.cell-btn.remove{left:6px;}
.cell-btn.edit{left:32px;}

.text-panel{position:absolute; display:flex; align-items:center; justify-content:center; padding:4% 6%; text-align:center; overflow:hidden;}
.text-panel .txt{width:100%; word-wrap:break-word; white-space:pre-wrap; line-height:1.15;}
.text-panel.empty-hint{color:rgba(245,242,248,0.35); font-family:'Inter',sans-serif; font-size:13px; text-transform:uppercase; letter-spacing:.08em;}

.overlay-box{position:absolute; cursor:grab; user-select:none; display:flex; align-items:center; justify-content:center; z-index:5;}
.ov-clip{width:100%; height:100%; overflow:hidden; display:flex; align-items:center; justify-content:center;}
.overlay-box.selected{outline:2px dashed var(--flash); outline-offset:4px;}
.ov-resize-handle{
  position:absolute; right:-9px; bottom:-9px; width:16px; height:16px;
  background:var(--flash); border:2px solid var(--paper); border-radius:50%;
  cursor:nwse-resize; z-index:7;
}
.ov-rotate-handle{
  position:absolute; left:50%; top:-34px; width:14px; height:14px;
  background:var(--mint); border:2px solid var(--paper); border-radius:50%;
  cursor:grab; z-index:7; transform:translateX(-50%);
}
.ov-rotate-line{
  position:absolute; left:50%; top:-22px; width:1px; height:22px;
  background:var(--mint); transform:translateX(-50%); z-index:6;
}
.overlay-box .ov-x{position:absolute; top:-10px; right:-10px; width:18px; height:18px; border-radius:50%; background:var(--flash); color:var(--ink); font-size:11px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-weight:700; z-index:6;}
.overlay-box .ov-emoji{font-size:1em; line-height:1;}
.overlay-box .ov-shape{width:100%; height:100%;}
.overlay-box .ov-text{width:100%; text-align:center; word-break:break-word; line-height:1.05;}
.overlay-box .ov-logo{width:100%; height:100%; object-fit:contain;}

.strip{margin-top:16px; display:flex; gap:8px; overflow-x:auto; padding-bottom:6px;}
.thumb{position:relative; flex:0 0 auto; width:60px; height:60px; border:1px solid var(--line); cursor:grab; overflow:hidden; border-radius:4px;}
.thumb img{width:100%; height:100%; object-fit:cover;}
.thumb .thumb-x{position:absolute; top:2px; right:2px; width:16px; height:16px; background:rgba(23,18,32,0.85); color:var(--paper); font-size:10px; display:flex; align-items:center; justify-content:center; cursor:pointer; border-radius:2px;}
.thumb-add{flex:0 0 auto; width:60px; height:60px; border:1px dashed var(--line); border-radius:4px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--paper-dim); font-size:20px;}
.thumb-add:hover{border-color:var(--flash); color:var(--flash);}

/* ---------- side panel (accordion) ---------- */
.panel{background:var(--panel); border:1px solid var(--line); padding:14px; border-radius:6px; display:flex; flex-direction:column; gap:2px; height:fit-content;}
.panel-scroll-pad{padding-bottom:8px;}
.panel-actions-sticky{
  background:var(--panel); padding:14px 6px 4px; margin-top:4px;
  border-top:1px solid var(--line); display:flex; flex-direction:column; gap:10px;
}
.panel-section{border-bottom:1px solid var(--line);}
.panel-section:last-of-type{border-bottom:none;}
.panel-section summary{
  list-style:none; cursor:pointer; padding:14px 6px; display:flex; align-items:center;
  justify-content:space-between; font-family:'Poppins',sans-serif; font-size:13.5px;
  font-weight:800; color:var(--paper); text-transform:uppercase; letter-spacing:.03em;
}
.panel-section summary::-webkit-details-marker{display:none;}
.panel-section summary .chev{color:var(--flash); transition:transform .15s ease; font-size:11px;}
.panel-section[open] summary .chev{transform:rotate(90deg);}
.panel-section summary:hover{color:var(--flash);}
.panel-body{padding:2px 6px 18px; display:flex; flex-direction:column; gap:16px;}

.chip-row{display:flex; flex-wrap:wrap; gap:8px;}
.chip{background:var(--panel-2); border:1px solid var(--line); color:var(--paper); font-family:'Inter',sans-serif; font-weight:600; font-size:11.5px; padding:8px 10px; cursor:pointer; border-radius:5px;}
.chip:hover{border-color:var(--flash); color:var(--flash);}
.chip.active{border-color:var(--flash); color:var(--flash); background:rgba(255,111,145,.1);}

.tmpl-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}
.tmpl-btn{aspect-ratio:1; background:var(--panel-2); border:1px solid var(--line); cursor:pointer; position:relative; border-radius:4px; padding:4px;}
.tmpl-btn:hover{border-color:var(--flash);}
.tmpl-btn.active{border-color:var(--flash);}
.tmpl-btn .r{position:absolute; background:var(--paper-dim);}

.control{display:flex; flex-direction:column; gap:6px;}
.control-head{display:flex; justify-content:space-between; font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; color:var(--paper-dim);}
.control-head .val{color:var(--paper);}
input[type=range]{-webkit-appearance:none; width:100%; height:3px; background:var(--line); outline:none; margin:8px 0; border-radius:2px;}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:15px; height:15px; border-radius:50%; background:var(--paper); border:2px solid var(--flash); cursor:pointer; margin-top:-6px;}
input[type=range]::-moz-range-thumb{width:13px; height:13px; border-radius:50%; background:var(--paper); border:2px solid var(--flash); cursor:pointer;}
input[type=range]:disabled::-webkit-slider-thumb{border-color:var(--paper-dim);}
input[type=range]:disabled{opacity:.4;}

select{width:100%; background:var(--panel-2); color:var(--paper); border:1px solid var(--line); padding:9px 10px; border-radius:5px; font-family:'Inter',sans-serif; font-size:13px; cursor:pointer;}

.color-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
input[type=color]{width:34px; height:28px; border:1px solid var(--line); background:none; cursor:pointer; padding:0; border-radius:3px;}
.color-row span{font-size:11.5px; color:var(--paper-dim); text-transform:uppercase; letter-spacing:.03em;}

textarea, .text-row input[type=text]{width:100%; background:var(--panel-2); border:1px solid var(--line); color:var(--paper); font-family:'Inter',sans-serif; font-size:13px; padding:9px 10px; border-radius:5px; resize:vertical;}
.toggle-row{display:flex; align-items:center; gap:8px; font-size:11.5px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:var(--paper-dim);}
.toggle-row input{accent-color:var(--flash);}

.sticker-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:6px;}
.sticker-btn{aspect-ratio:1; background:var(--panel-2); border:1px solid var(--line); border-radius:5px; font-size:19px; display:flex; align-items:center; justify-content:center; cursor:pointer;}
.sticker-btn:hover{border-color:var(--flash);}

.shape-row{display:flex; gap:8px;}
.shape-btn{flex:1; background:var(--panel-2); border:1px solid var(--line); border-radius:5px; padding:12px 6px; cursor:pointer; display:flex; align-items:center; justify-content:center;}
.shape-btn:hover{border-color:var(--flash);}
.shape-preview{background:var(--paper-dim);}
.shape-preview.rect{width:26px; height:16px; border-radius:2px;}
.shape-preview.bar{width:30px; height:8px; border-radius:2px;}
.shape-preview.circle{width:18px; height:18px; border-radius:50%;}

.format-row{display:flex; gap:8px; font-size:11.5px; text-transform:uppercase; letter-spacing:0.03em; color:var(--paper-dim); font-weight:600;}
.format-row label{display:flex; align-items:center; gap:5px; cursor:pointer;}
.format-row input{accent-color:var(--flash);}

button.main{background:var(--flash); color:var(--ink); border:none; font-family:'Poppins',sans-serif; font-weight:800; font-size:12.5px; letter-spacing:0.03em; text-transform:uppercase; padding:13px 14px; cursor:pointer; border-radius:6px; width:100%;}
button.main:hover{opacity:.9;}
button.main:disabled{background:var(--panel-2); color:var(--paper-dim); cursor:not-allowed;}
button.ghost{background:transparent; color:var(--paper-dim); border:1px solid var(--line); font-family:'Inter',sans-serif; font-weight:600; font-size:12.5px; letter-spacing:0.03em; text-transform:uppercase; padding:13px 14px; cursor:pointer; border-radius:6px; width:100%;}
button.ghost:hover{color:var(--paper); border-color:var(--paper-dim);}
button.small{background:var(--panel-2); color:var(--paper); border:1px solid var(--line); font-family:'Inter',sans-serif; font-weight:600; font-size:11.5px; padding:9px 10px; cursor:pointer; border-radius:5px;}
button.small:hover{border-color:var(--flash);}
button.small.active{border-color:var(--flash); color:var(--flash);}
button.danger{background:transparent; color:#ff9797; border:1px solid #5a2f38; font-family:'Inter',sans-serif; font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.03em; padding:11px 12px; cursor:pointer; border-radius:6px; width:100%;}
button.danger:hover{border-color:#ff9797;}

.checklist{font-size:12px; color:var(--paper-dim); line-height:1.9;}
.checklist b{color:var(--mint); font-style:normal;}

.tool-links{color:var(--paper-dim); font-size:12.5px; margin-top:6px;}
.tool-links a{color:var(--mint); text-decoration:none; font-weight:600;}
.tool-links a:hover{color:var(--flash);}

/* ---- Edit modal ---- */
.modal-overlay{position:fixed; inset:0; background:rgba(10,8,15,0.85); display:none; align-items:center; justify-content:center; z-index:100; padding:20px;}
.modal-overlay.active{display:flex;}
.modal-box{background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:18px; width:100%; max-width:760px; max-height:92vh; overflow-y:auto;}
.modal-tabs{display:flex; gap:8px; margin-bottom:14px;}
.modal-tabs button{flex:1;}
.modal-canvas-wrap{position:relative; background:#000; border-radius:4px; overflow:hidden; display:flex; align-items:center; justify-content:center; margin-bottom:14px; touch-action:none;}
#modalCanvas{max-width:100%; display:block;}
.crop-box{position:absolute; border:2px solid var(--flash); box-shadow:0 0 0 2000px rgba(0,0,0,0.5); cursor:move;}
.crop-handle{position:absolute; width:14px; height:14px; background:var(--flash); border-radius:2px;}
.crop-handle.nw{left:-7px; top:-7px; cursor:nwse-resize;}
.crop-handle.ne{right:-7px; top:-7px; cursor:nesw-resize;}
.crop-handle.sw{left:-7px; bottom:-7px; cursor:nesw-resize;}
.crop-handle.se{right:-7px; bottom:-7px; cursor:nwse-resize;}
.modal-controls{display:flex; flex-direction:column; gap:12px; margin-bottom:14px;}
.modal-row{display:flex; gap:10px; flex-wrap:wrap; align-items:center;}
.modal-actions{display:flex; gap:10px;}
.modal-actions button{flex:1;}