/* Remove theme padding/width on this page only */
html, body { height: 100%; margin: 0; }
.gcv-page .wp-site-blocks { max-width: none; padding: 0; }

/* Prevent document scroll while viewer is open */
body.gcv-active { overflow: hidden; }

/* Home link above the input */
.gcv-home { margin-bottom: 10px; }
.gcv-home a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 8px;
  background: #1c1d20;
  border: 1px solid #2b2d31;
  color: #e5e7eb;
  font-weight: 600;
}
.gcv-home a:hover { background: #222428; border-color: #3a3d42; }
.gcv-home-emoji,
.gcv-home-svg { display: inline-block; line-height: 1; }
.gcv-home-text { line-height: 1; }


/* Root fills viewport (admin bar safe below) */
#gcv-root { height: 100vh; }

/* Two-pane layout */
.gcv-wrap { display: flex; height: 100%; }

/* Left input panel */
#gcv-left {
  /*width: 360px;*/
  /*min-width: 270px;*/
  padding: 0px;
  overflow: auto;            /* only this column scrolls */
  box-sizing: border-box;
  border-right: 1px solid rgba(255,255,255,.08);
  background: #111214; 
}

#gcv-left textarea {
  width:100%;
  min-height:5vh;
  max-height:89vh;
  resize:auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:12px; line-height:1.35;
  box-sizing:border-box;
}
.gcv-controls { margin-top:2px; display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.gcv-toggle   { display:inline-flex; gap:6px; align-items:center; }

/* Right canvas pane */
#gcv-right {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;          /* no scrollbars; canvas fills it */
}
#plot { position: absolute; inset: 0; }

/* Tooltip */
#tooltip {
  position:absolute; display:none; pointer-events:none;
  background:rgba(0,0,0,.82); color:#16a34a; padding:6px 8px;
  border-radius:4px; font:14px/1.2 system-ui,sans-serif; z-index:5;
}

/* ---- GCV theming ---- */
.gcv-page #gcv-left {
  background: #111214;               /* subtle dark */
}

/* Label + FPS inline row */
.gcv-page .gcv-ui > .gcv-row {
  display: block;
  align-items: center;
  gap: 5px;
  margin-bottom: 5px;
}

/* “G-code” label */
.gcv-page #gcv-left label[for="gcode-input"] {
  display:block;
  margin: 12px;                          /* we control spacing via row */
  /*color: #16a34a;;*/
  font-weight: 600;
}

/* Textarea: gray background, light text */
.gcv-page #gcode-input {
  min-width: 250px;
  background: #1c1d20;
  color: var(--wp--preset--color--accent-1);
  border: 1px solid #2b2d31;
  border-radius: 6px;
  padding: 5px;
  outline: none;
  margin: 0;
  
}
.gcv-page #gcode-input:focus {
  border-color: #16a34a;              /* green focus ring */
  box-shadow: 0 0 0 2px rgba(22,163,74,.25);
}

/* Plot button: bigger, gray with green text */
.gcv-page #plot-btn {
  appearance: none;
  background: #2b2d31;
  color: var(--wp--preset--color--accent-1);
  border: 1px solid #3a3d42;
  border-radius: 4px;
  padding: 10px 16px;
  font-weight: 700;
  letter-spacing: .2px;
  cursor: pointer;
  transition: transform .06s ease, background .15s ease, border-color .15s ease;
}
.gcv-page #plot-btn:hover {
  background: #32353a;
  border-color: #44484f;
}
.gcv-page #plot-btn:active {
  transform: translateY(1px);
}

/* FPS counter (inline, right of “G-code” label) */
.gcv-page .gcv-fps {
  background: #1a1b1e;
  color: #16a34a;
  border: 1px solid #2b2d31;
  border-radius: 6px;
  padding: 6px 10px;
  font: 12px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: nowrap;
}

/* Kill stray paragraph gaps inside the left panel only 
#gcv-left > p { margin: 0; }
#gcv-left > p:empty { display: none; }
/* common empty P Gutenberg inserts – only whitespace or a BR 
#gcv-left > p:has(br:only-child) { display: none; }*/


/* Admin bar safety */
html.admin-bar #gcv-root { height: calc(100vh - 32px); }
@media (max-width: 782px) {
  html.admin-bar #gcv-root { height: calc(100vh - 46px); }
}

/* Mobile: stack */
@media (max-width: 900px) {
  #gcv-left { width:100%; max-width:none; border-right:0; border-bottom:1px solid rgba(255,255,255,.08); }
  .gcv-wrap { flex-direction: column; }
  #gcv-right { height: 60vh; }
}