/* Layout-editor (debug mode) styles — only active when .superevent-stage
   carries the .is-debug class. Outlines every component, exposes corner +
   edge resize handles on the selected one, and shows a coord info panel. */

.superevent-stage.is-debug > [id^="se-"] {
  outline: 1px dashed rgba(255, 200, 60, 0.7);
  outline-offset: -1px;
  cursor: move;
  /* In edit mode, any touch on a component is OUR drag — stop the
     browser from interpreting it as a page scroll. View mode keeps
     default touch-action so scrolling works normally. */
  touch-action: none;
}
/* Resize handles also need touch-action: none so they don't trigger
   the browser's scroll gesture. */
.le-handle { touch-action: none; }

/* Block interactions with inner component content in debug mode — the
   user drags the outer box, not the pie chart or a form field. */
.superevent-stage.is-debug > [id^="se-"] * {
  pointer-events: none;
  user-select: none;
}

/* …except for images that have their own pan/zoom handlers. These
   re-enable pointer events so drag/wheel reach the image-adjuster
   module. Image-adjuster stopPropagation()'s so the outer host drag
   doesn't also fire. */
.superevent-stage.is-debug .np-image {
  pointer-events: auto;
  cursor: grab;
}
.superevent-stage.is-debug .np-image:active { cursor: grabbing; }

.superevent-stage.is-debug > [id^="se-"]:hover {
  outline-color: rgba(255, 200, 60, 1);
  outline-width: 2px;
  z-index: 10;
}

.superevent-stage.is-debug > [id^="se-"].is-selected {
  outline: 2px solid #ff9c2e;
  outline-offset: -2px;
  z-index: 20;
}

/* Backdrop components — e.g. the news paper — must stay BEHIND their
   siblings even when hovered or selected. Their opaque backgrounds
   would otherwise cover the pieces layered on top of them. */
.superevent-stage > #se-news-paper,
.superevent-stage.is-debug > #se-news-paper:hover,
.superevent-stage.is-debug > #se-news-paper.is-selected {
  z-index: 0 !important;
}

/* Small key-label in each box's top-left — hidden by default so it
   doesn't clash with component headers ("NATIONAL SPIRITS" etc.), shown
   only on hover or when selected. */
.superevent-stage.is-debug > [id^="se-"]::before {
  content: attr(data-debug-label);
  position: absolute;
  top: 2px; left: 4px;
  font: 10px ui-monospace, Consolas, monospace;
  color: #ffcc66;
  background: rgba(0, 0, 0, 0.75);
  padding: 1px 5px;
  border-radius: 2px;
  pointer-events: none;
  z-index: 30;
  letter-spacing: 0.5px;
  opacity: 0;
  transition: opacity 0.12s;
}
.superevent-stage.is-debug > [id^="se-"]:hover::before,
.superevent-stage.is-debug > [id^="se-"].is-selected::before {
  opacity: 1;
}

/* 8 resize handles — rendered as siblings of the selected box, absolutely
   positioned in the stage. Generated by the JS when a box is selected. */
.le-handle {
  position: absolute;
  width: 10px; height: 10px;
  background: #ff9c2e;
  border: 1px solid #000;
  box-sizing: border-box;
  z-index: 25;
  pointer-events: auto;
}
.le-handle-nw { cursor: nwse-resize; transform: translate(-50%, -50%); }
.le-handle-n  { cursor: ns-resize;   transform: translate(-50%, -50%); }
.le-handle-ne { cursor: nesw-resize; transform: translate(-50%, -50%); }
.le-handle-e  { cursor: ew-resize;   transform: translate(-50%, -50%); }
.le-handle-se { cursor: nwse-resize; transform: translate(-50%, -50%); }
.le-handle-s  { cursor: ns-resize;   transform: translate(-50%, -50%); }
.le-handle-sw { cursor: nesw-resize; transform: translate(-50%, -50%); }
.le-handle-w  { cursor: ew-resize;   transform: translate(-50%, -50%); }

/* Floating info / action panel. Fixed to the viewport so it's always
   reachable even if the user has scrolled the 1920-wide stage. */
.le-panel {
  position: fixed;
  top: 60px; right: 16px;
  width: 280px;
  max-height: calc(100vh - 80px);   /* never taller than viewport */
  overflow-y: auto;
  background: #15171a;
  border: 1px solid #3c3f43;
  color: #dddcd5;
  font: 12px 'Segoe UI', system-ui, sans-serif;
  padding: 12px 14px;
  z-index: 1000;
  box-shadow: 0 6px 20px rgba(0,0,0,0.6);
}
.le-panel::-webkit-scrollbar { width: 6px; }
.le-panel::-webkit-scrollbar-thumb { background: #2f3236; border-radius: 3px; }

.le-actions-primary {
  margin-bottom: 4px;
}
.le-actions-primary + .le-actions {
  margin-bottom: 10px;
}

.le-advanced {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #2a2d31;
}
.le-advanced > summary {
  cursor: pointer;
  font-size: 10.5px;
  color: #8b8c89;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 4px 0;
  user-select: none;
}
.le-advanced > summary:hover { color: #ff9c2e; }
.le-panel h3 {
  margin: 0 0 8px;
  font-size: 10.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #ff9c2e;
  font-weight: 700;
}
.le-panel-grip {
  cursor: move;
  user-select: none;
  padding: 4px 0;
  margin: -4px 0 4px !important;
}
.le-panel-grip::before {
  content: '⋮⋮';
  display: inline-block;
  margin-right: 6px;
  color: #5a5d61;
  letter-spacing: -2px;
  font-weight: 700;
}
.le-panel .le-row {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 6px;
  font: 11.5px ui-monospace, Consolas, monospace;
  margin-bottom: 2px;
}
.le-panel .le-row > span:first-child { color: #8b8c89; }
.le-panel .le-hint {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid #2a2d31;
  font-size: 10.5px;
  color: #8b8c89;
  line-height: 1.5;
}
.le-panel .le-hint kbd {
  background: #0c0d0f;
  border: 1px solid #3c3f43;
  padding: 0 4px;
  border-radius: 2px;
  font-family: inherit;
  font-size: 10px;
  color: #dddcd5;
}
.le-panel .le-actions {
  display: flex; gap: 8px;
  margin-top: 10px;
}
.le-panel button {
  flex: 1;
  background: #1b1d20;
  color: #dddcd5;
  border: 1px solid #3c3f43;
  padding: 6px 8px;
  font: 11px 'Segoe UI', system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  border-radius: 2px;
}
.le-panel button:hover { border-color: #ff9c2e; color: #ff9c2e; }
.le-panel button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  border-color: #2a2d31;
  color: #5a5d61;
}
.le-panel button:disabled:hover { border-color: #2a2d31; color: #5a5d61; }
.le-panel button.primary {
  background: #ff9c2e;
  color: #15171a;
  border-color: #ff9c2e;
  font-weight: 700;
}
.le-panel button.primary:hover { background: #ffb452; color: #15171a; }
.le-panel .le-status {
  margin-top: 8px;
  font-size: 10.5px;
  color: #7cc97b;
  min-height: 14px;
}

/* Header toggle button (outside the stage, always reachable). */
.debug-toggle {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--panel-border);
  padding: 4px 10px;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 2px;
  font-family: inherit;
}
.debug-toggle:hover { color: #ff9c2e; border-color: #ff9c2e; }
.debug-toggle.is-active { color: #ff9c2e; border-color: #ff9c2e; background: rgba(255, 156, 46, 0.08); }

/* When exporting a PNG, make every piece of editor chrome invisible so
   the capture matches the pure View mode. These rules target the panels
   directly (not the stage) because the panels are in document.body, not
   inside the stage. */
.superevent-stage.is-exporting > [id^="se-"] { outline: none !important; }
/* NOTE: we used to hide every se-* host ::before here as belt-and-suspenders
   for the debug label. But the label only renders when `.is-debug` is on
   the stage (see the `.is-debug > [id^="se-"]::before` rule above), and
   `.is-debug` is stripped before export begins. Hiding ::before globally
   was killing legitimate component pseudo-elements (the newspaper paper's
   fold crease, etc.) from the exported PNG. Left off intentionally. */
.superevent-stage.is-exporting .le-handle { display: none !important; }
body:has(.superevent-stage.is-exporting) .le-panel,
body:has(.superevent-stage.is-exporting) .ep-panel {
  display: none !important;
}

/* (Removed: stage bg flatten during export. html2canvas couldn't render
   feTurbulence so we used to force a solid dark colour — but we no
   longer use html2canvas. html-to-image renders the brushed-metal
   stage background faithfully, so no override needed.) */