/* Manual V2 editor (admin/manual_editor, development only). The slide itself
   uses the public mv2-* styles (styles.css "Manual V2"); this is the chrome
   around it and the selection handles. */
.me-body {
  margin: 0;
  height: 100vh;
  overflow: hidden;
  background: var(--bg-1);
  color: var(--text-main);
  font-family: var(--font-body);
}

.me {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 500px;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100vh;
}

.me-bar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--accent-14);
  background: var(--bg-2);
  font-size: 0.9rem;
}

.me-back {
  color: var(--text-subtle);
  text-decoration: none;
}

.me-back:hover {
  color: var(--text-main);
}

.me-crumb {
  color: var(--text-subtle);
}

.me-crumb strong {
  color: var(--text-heading);
}

.me-tools {
  display: flex;
  gap: 6px;
  margin-left: 12px;
}

.me-status {
  margin-left: auto;
  color: var(--text-subtle);
  font-size: 0.85rem;
}

.me-status.is-error {
  color: #e07070;
}

.me-btn,
.me-zoom {
  padding: 5px 11px;
  border: 1px solid var(--accent-28);
  border-radius: 7px;
  background: var(--bg-3);
  color: var(--text-main);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}

.me-btn:hover:not(:disabled),
.me-zoom:hover {
  border-color: var(--accent-46);
}

.me-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.me-btn[aria-pressed="true"] {
  background: var(--accent-28);
}

.me-btn-small {
  padding: 2px 8px;
  font-size: 0.75rem;
}

.me-align {
  display: flex;
  gap: 2px;
  margin: 0 6px;
}

.me-btn-icon {
  display: grid;
  place-items: center;
  padding: 5px 7px;
}

.me-btn-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
}

.me-btn-danger {
  border-color: rgba(224, 112, 112, 0.5);
}

.me-save.is-dirty {
  background: var(--accent-active);
  border-color: var(--accent-active);
}

.me-files,
.me-props {
  overflow: auto;
  padding: 12px;
  background: var(--bg-2);
  font-size: 0.85rem;
}

.me-files {
  border-right: 1px solid var(--accent-14);
}

.me-props {
  border-left: 1px solid var(--accent-14);
}

.me-panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 10px;
  color: var(--text-heading);
  font-weight: 600;
}

.me-file-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.me-file {
  padding: 6px;
  border: 1px solid var(--accent-14);
  border-radius: 7px;
  background: var(--bg-3);
  cursor: grab;
}

.me-file:hover {
  border-color: var(--accent-46);
}

.me-file img {
  display: block;
  width: 100%;
  height: 90px;
  margin-bottom: 4px;
  border-radius: 4px;
  background: #4b4b4b;
  object-fit: contain;
}

.me-file span {
  color: var(--text-subtle);
  word-break: break-all;
}

.me-file em {
  float: right;
  color: var(--accent-active);
  font-size: 0.75rem;
  font-style: normal;
}

.me-file-empty,
.me-hint {
  color: var(--text-subtle);
  font-size: 0.78rem;
  line-height: 1.4;
}

.me-hint code {
  word-break: break-all;
}

.me-canvas {
  display: flex;
  overflow: auto;
  padding: 32px;
  background: #1b1b1f;
}

/* margin: auto (not centering on the parent) so a zoomed page scrolls to its
   left / top edges too. */
.me-page {
  flex: none;
  margin: auto;
  box-shadow: 0 0 0 1px var(--accent-14), 0 10px 40px rgba(0, 0, 0, 0.5);
}

.me .mv2-body {
  user-select: none;
  -webkit-user-select: none;
}

.me .mv2-notes {
  pointer-events: none;
}

.me .mv2-note,
.me .mv2-image {
  pointer-events: auto;
  cursor: move;
}

.me .mv2-note:hover,
.me .mv2-image:hover {
  outline: 1px dashed var(--accent-46);
  outline-offset: 2px;
}

.me .mv2-note.is-selected,
.me .mv2-image.is-selected {
  outline: 1px solid var(--accent-active);
  outline-offset: 2px;
}

.me .mv2-note.is-empty {
  opacity: 0.4;
}

.me .mv2-image.is-missing {
  min-height: 20px;
  outline: 1px dashed #e07070;
}

.me .mv2-body.is-drawing,
.me .mv2-body.is-drawing * {
  cursor: crosshair;
}

.me-reference {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
}

.me-handles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.me-handle {
  fill: #ffffff;
  stroke: var(--accent-active);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  pointer-events: all;
}

.me-handle-nw,
.me-handle-se {
  cursor: nwse-resize;
}

.me-handle-ne,
.me-handle-sw {
  cursor: nesw-resize;
}

circle.me-handle {
  cursor: crosshair;
}

.me-line-hit {
  stroke: transparent;
  stroke-width: 12;
  vector-effect: non-scaling-stroke;
  pointer-events: stroke;
  cursor: move;
}

.me-line-hit.is-selected {
  stroke: var(--accent-28);
}

.me-marquee {
  fill: var(--accent-14);
  stroke: var(--accent-active);
  stroke-width: 1;
  stroke-dasharray: 4 3;
  vector-effect: non-scaling-stroke;
}

.me-field {
  display: block;
  margin-bottom: 9px;
}

.me-field > span {
  display: block;
  margin-bottom: 3px;
  color: var(--text-subtle);
  font-size: 0.78rem;
}

.me-field input,
.me-field select,
.me-field textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 5px 8px;
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  background: var(--bg-1);
  color: var(--text-main);
  font: inherit;
  font-size: 0.85rem;
}

.me-field input[type="range"] {
  padding: 0;
  border: 0;
  background: none;
}

.me-field textarea {
  resize: vertical;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.8rem;
  line-height: 1.45;
}

.me-field input:focus,
.me-field select:focus,
.me-field textarea:focus {
  outline: none;
  border-color: var(--accent-46);
}

.me-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.me-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.me-help {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  color: var(--text-subtle);
  font-size: 0.78rem;
  line-height: 1.7;
}

.me-help kbd {
  padding: 1px 5px;
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  color: var(--text-heading);
  font-family: inherit;
}

.manual-editor-new {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.manual-editor-new .text-input {
  min-width: 0;
  flex: 1 1 180px;
}