/**
 * Editor shell layout — the Canva-style three-region grid from PRD §5:
 * Elements | Canvas | Properties, with a toolbar above. Zoom/grid/snap
 * controls float directly over the canvas area itself (see
 * .eps-canvas-controls in canvas.css) rather than living in a separate
 * bottom row — a fixed-height row at the very bottom of the viewport ended
 * up visually disconnected from the canvas whenever the canvas didn't fill
 * the full available height (e.g. after fitToViewport() zooms out for a
 * large design), leaving an odd gap between them. Desktop-first: this
 * layout is not adapted for narrow viewports (see responsive.css for the
 * "unsupported width" notice instead).
 */
.eps-editor {
  background: var(--eps-bg);
  min-height: calc(100vh - 32px);
  display: grid;
  grid-template-rows: 56px 1fr;
  font-family: var(--eps-font);
}

.eps-editor__toolbar { grid-row: 1; }

.eps-editor__body {
  grid-row: 2;
  display: grid;
  grid-template-columns: 280px 1fr 300px;
  min-height: 0;
  gap: var(--eps-space-3);
  padding: var(--eps-space-3);
}

.eps-editor__sidebar-left,
.eps-editor__sidebar-right {
  min-height: 0;
  overflow-y: auto;
  background: var(--eps-surface);
  border: 1px solid var(--eps-border);
  border-radius: var(--eps-radius-lg);
  box-shadow: var(--eps-shadow-sm);
}

.eps-editor__canvas-wrap {
  min-height: 0;
  background: var(--eps-surface-sunken);
  border: 1px solid var(--eps-border);
  border-radius: var(--eps-radius-lg);
  position: relative;
  /* A design bigger than the visible area must be reachable by scrolling,
     not silently clipped — `hidden` here was cutting off anything past the
     container's edges with no way to see or reach it, which is exactly what
     happened with a large (e.g. 40x30 inch) canvas. canvas-engine.js also
     auto-fits the zoom level on load so the whole boundary is visible
     without scrolling in the common case, matching Figma/Canva's behaviour;
     this scroll fallback is for whenever the person zooms in past that. */
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.eps-panel-title {
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--eps-text-secondary);
  padding: var(--eps-space-3) var(--eps-space-3) var(--eps-space-2);
}

.eps-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--eps-space-2);
  padding: var(--eps-space-6);
  color: var(--eps-text-tertiary);
  text-align: center;
}

.eps-admin-card {
  background: var(--eps-surface);
  border: 1px solid var(--eps-border);
  border-radius: var(--eps-radius-lg);
  padding: var(--eps-space-5);
  max-width: 480px;
  box-shadow: var(--eps-shadow-sm);
}
.eps-admin-notice {
  background: var(--eps-success-soft);
  color: var(--eps-success);
  padding: var(--eps-space-2) var(--eps-space-3);
  border-radius: var(--eps-radius-sm);
  font-size: 13px;
  font-weight: 500;
}

/* New Design setup dialog (assets/js/ui/new-design-dialog.js) — a blocking
   modal shown before a brand-new design's canvas becomes interactive, since
   placing elements before the physical dimensions are confirmed is exactly
   how a design ends up the wrong size to stitch onto fabric. */
.eps-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200000;
  background: rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--eps-space-4);
}
.eps-modal-card {
  background: var(--eps-surface);
  border-radius: var(--eps-radius-lg);
  box-shadow: var(--eps-shadow-lg);
  border: 1px solid var(--eps-border);
  padding: var(--eps-space-5);
  width: 100%;
  max-width: 440px;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--eps-space-4);
  font-family: var(--eps-font);
}
.eps-modal-card__title {
  font-size: 17px;
  font-weight: 700;
  margin: 0;
  color: var(--eps-text-primary);
}
.eps-modal-card__subtitle {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--eps-text-secondary);
  margin: -8px 0 0;
}
.eps-modal-card__hint {
  font-size: 11px;
  color: var(--eps-text-tertiary);
  margin: 4px 0 0;
}