/* =========================================================
   editor.css — EDITOR PAGE ONLY
   (workbench, panels, canvas, tools, properties)
   ========================================================= */

/* ---------- Editor Hero extras ---------- */
.hero-grid{
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items:end;
}
.stamp{
  position:absolute;
  top:34px; right:6vw;
  border:2px solid var(--proof-red);
  color:var(--proof-red);
  font-family:'Space Mono', monospace;
  font-size:11px; font-weight:700;
  letter-spacing:0.14em;
  padding:6px 12px;
  transform: rotate(4deg);
  border-radius: 3px;
  opacity:0.9;
}
h1.headline{
  font-family:'Space Mono', monospace;
  font-weight:700;
  font-size:clamp(34px, 5.4vw, 64px);
  line-height:1.04;
  margin:0 0 18px;
  letter-spacing:-0.01em;
}
h1.headline .mark{
  color:var(--proof-red);
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
p.sub{
  font-size:17px;
  color:var(--ink-soft);
  max-width:46ch;
  line-height:1.55;
  margin:0 0 26px;
}
.cta-row{ display:flex; gap:14px; flex-wrap:wrap; }
.margin-note{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  color:var(--teal);
  border-left:2px solid var(--teal);
  padding-left:12px;
  line-height:1.7;
}
.margin-note b{ color:var(--ink); }
.marks{
  display:flex; gap:22px; align-items:center;
  font-family:'Space Mono', monospace;
  color: var(--paper-line);
  font-size:22px;
  margin: 6px 0 0;
}
.marks span{ color: var(--proof-red); opacity:0.55; }

/* ---------- App shell ---------- */
main.app{
  padding: 40px 6vw 90px;
}
.app-head{
  display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom: 22px; flex-wrap:wrap; gap:10px;
}
.mode-tabs{ display:flex; gap:8px; }
.mode-tab{
  font-family:'IBM Plex Mono', monospace;
  font-size:12.5px;
  padding:9px 16px;
  border:2px solid var(--ink);
  background:transparent;
  color:var(--ink);
  border-radius:3px;
  cursor:pointer;
  min-height:44px;
}
.mode-tab.active{ background:var(--ink); color:var(--paper); }

/* ---------- Workbench ---------- */
.workbench{
  display:grid;
  grid-template-columns: 210px 1fr 250px;
  gap:0;
  background:var(--white);
  border:2px solid var(--ink);
  border-radius:6px;
  overflow:hidden;
  min-height: 560px;
}
.panel{ padding:18px; }
.panel-left{ border-right:1px solid var(--paper-line); background:var(--panel-bg); }
.panel-right{ border-left:1px solid var(--paper-line); background:var(--panel-bg); }
.panel h3{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--ink-soft); margin:0 0 12px;
}

/* ---------- Upload zone ---------- */
.upload-zone{
  border:2px dashed var(--paper-line);
  border-radius:5px;
  padding:20px 10px;
  text-align:center;
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  color:var(--ink-soft);
  cursor:pointer;
  margin-bottom:18px;
}
.upload-zone:hover{ border-color:var(--teal); color:var(--teal); }
input[type=file]{ display:none; }

/* ---------- Tool buttons ---------- */
.props-empty{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  color:var(--ink-soft);
  line-height:1.6;
}
.scan-status{
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  color:var(--ink-soft);
  line-height:1.6;
  margin-top:4px;
}
.download-section{
  margin-top:26px;
  border-top:1px solid var(--paper-line);
  padding-top:16px;
}
.sample-btn{
  border:1px dashed var(--paper-line);
  justify-content:center;
  font-family:'IBM Plex Mono', monospace;
  font-size:11.5px;
  margin-bottom:18px;
}
.tool-btn-bordered{
  border:1px solid var(--paper-line);
}
.tool-btn{
  width:100%;
  display:flex; align-items:center; gap:10px;
  font-family:'IBM Plex Sans', sans-serif;
  font-size:13.5px; font-weight:500;
  padding:10px 10px; margin-bottom:6px;
  border:1px solid transparent;
  background:transparent; color:var(--ink);
  border-radius:4px; cursor:pointer; text-align:left;
  min-height:44px;
}
.tool-btn:hover{ background:#EFEDE4; }
.tool-btn.active{ background:var(--ink); color:var(--paper); }
.tool-btn:disabled{ opacity:0.35; cursor:not-allowed; }
.tool-btn:disabled:hover{ background:transparent; }
.tool-btn-row{
  display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:10px;
}
.tool-btn-compact{
  padding:7px 6px; font-size:12px; font-family:'IBM Plex Mono', monospace;
  letter-spacing:0.01em; justify-content:center;
}
.tool-btn-compact .k{
  opacity:0.6; margin:0; border:none; padding:0; color:inherit;
}
.tool-btn .k{
  font-family:'IBM Plex Mono', monospace;
  font-size:10px; color:var(--proof-red);
  border:1px solid currentColor; border-radius:3px;
  padding:1px 5px; opacity:0.8;
  margin-left:auto;
}

/* ---------- Pages thumbnails ---------- */
.pages-strip{ display:flex; flex-direction:column; gap:8px; margin-top:6px; max-height:200px; overflow-y:auto;}
.page-thumb{
  border:1px solid var(--paper-line); border-radius:4px; padding:6px 8px;
  font-family:'IBM Plex Mono', monospace; font-size:11.5px;
  cursor:pointer; display:flex; justify-content:space-between;
  min-height:44px; align-items:center;
}
.page-thumb.active{ border-color:var(--teal); color:var(--teal); }

/* ---------- Canvas stage ---------- */
.canvas-stage{
  display:flex; align-items:flex-start; justify-content:center;
  padding: 26px; overflow:auto; background:
    repeating-linear-gradient(45deg, var(--canvas-a) 0 10px, var(--canvas-b) 10px 20px);
  min-height: 520px;
}
.stage-inner{
  position:relative;
  box-shadow: 0 8px 30px rgba(22,35,63,0.18);
  background:#fff;
  max-width:100%;
}
.stage-inner canvas{ display:block; max-width:100%; height:auto; }
.overlay{ position:absolute; top:0; left:0; pointer-events:none; }
.box{
  position:absolute;
  pointer-events:auto;
  cursor:grab;
  border:1px solid transparent;
  touch-action:none;
}
.box.selected{ outline:1.5px dashed var(--teal); }
.box.text-box{
  padding:2px 4px;
  outline-offset:2px;
  white-space:pre-wrap;
  line-height:1.15;
  min-width: 20px;
}
.box.text-box:focus{ cursor:text; outline:1.5px solid var(--proof-red); }
.box.whiteout-box{ border-radius:1px; }
.box.direct-text{
  padding: 0;
  border-radius: 1px;
  cursor: text;
  overflow: hidden;
}
.direct-text-inner{
  width: 100%;
  height: 100%;
  padding: 0 2px;
  white-space: pre-wrap;
  line-height: 1.15;
  outline: none;
  cursor: text;
}
.resize-handle{
  position:absolute; right:-6px; bottom:-6px;
  width:12px; height:12px; border-radius:50%;
  background:var(--teal); border:2px solid #fff;
  cursor:nwse-resize;
  touch-action:none;
}
.drag-handle{
  position:absolute; left:-11px; top:-11px;
  width:20px; height:20px; border-radius:4px;
  background:var(--proof-red); border:2px solid #fff;
  cursor:grab;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:11px; line-height:1;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  user-select:none;
  touch-action:none;
  z-index:2;
}
.drag-handle:active{ cursor:grabbing; }
.empty-state{
  margin:auto; text-align:center; color:var(--ink-soft);
  font-family:'IBM Plex Mono', monospace; font-size:13px;
  max-width:280px; line-height:1.7; align-self:center;
}

/* ---------- Right panel: properties ---------- */
label.field-label{
  display:block; font-family:'IBM Plex Mono', monospace;
  font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--ink-soft); margin:14px 0 6px;
}
select, input[type=number], input[type=text]{
  width:100%; padding:8px 8px; font-family:'IBM Plex Sans',sans-serif;
  font-size:13px; border:1px solid var(--paper-line); border-radius:4px;
  background:#fff; color:var(--ink);
  min-height:44px;
  input-mode: numeric;
}
input[type=number]{ font-size:16px; }
input[type=color]{ width:100%; height:44px; border:1px solid var(--paper-line); border-radius:4px; padding:2px; background:#fff;}
input[type=range]{ width:100%; }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.toggle-group{ display:flex; gap:6px; }
.toggle-btn{
  flex:1; padding:7px 0; border:1px solid var(--paper-line); background:#fff;
  border-radius:4px; cursor:pointer; font-family:'Space Mono',monospace; font-size:13px;
  min-height:44px;
}
.toggle-btn.on{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

/* ---------- Info sections (used inside editor app area) ---------- */
.info-section{ padding: 54px 0 10px; border-top:1px solid var(--paper-line); }

/* ---------- Editor-only responsive ---------- */
@media (max-width: 1100px){
  .workbench{ grid-template-columns: 200px 1fr 220px; }
}

@media (max-width: 880px){
  .workbench{ grid-template-columns:1fr; }
  .panel-left, .panel-right{ border:none; border-top:1px solid var(--paper-line); }
  .canvas-stage{ min-height:340px; padding:14px; }
  .panel{ padding:16px; }
  .btn, .mode-tab, .toggle-btn, .tool-btn{ min-height:44px; }
}

@media (max-width: 600px){
  .mode-tabs{ width:100%; }
  .mode-tab{ flex:1; text-align:center; }
  .app-head{ flex-direction:column; align-items:flex-start; }
  select, input[type=number], input[type=text]{ font-size:16px; }
  .toggle-btn{ padding:10px 0; }
  .resize-handle{ width:44px; height:44px; right:-22px; bottom:-22px; background-clip:content-box; padding:15px; border-width:0; }
  .drag-handle{ width:44px; height:44px; left:-22px; top:-22px; font-size:16px; }
  .tool-btn{ padding:12px 10px; font-size:14px; }
}