/* Marks on the photo for Replace & Add (BACKLOG B25, marks_controller):
   the rail's "Mark the spot" row, and the dialog where the photo is shown
   large with a drawing layer laid exactly over it. */

.marks-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-3);
}

.marks-row .upload-fine { margin: 0; }

.marks-row .btn .toolbar-icon {
  width: 16px;
  height: 16px;
}

/* The site's reset zeroes margins, which also undid the modal dialog's
   own centering; margin auto puts it back. The dialog itself takes the
   opening focus (marks_controller#open), so no button opens ringed. */
.marks-dialog {
  margin: auto;
  width: min(100% - 2 * var(--space-4), 60rem);
  max-height: calc(100dvh - 2 * var(--space-4));
  padding: var(--space-5);
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--paper-card);
  box-shadow: var(--shadow-deep);
}

.marks-dialog::backdrop { background: rgba(15, 20, 23, 0.72); }
.marks-dialog:focus { outline: none; }

.marks-head h2 {
  margin: 0 0 var(--space-1);
  font-family: var(--font-display);
  font-size: var(--text-xl);
}

.marks-head p {
  margin: 0 0 var(--space-4);
  color: var(--ink-soft);
  font-size: var(--text-sm);
}

/* The stage sizes to the photo; the canvas sits on it exactly and takes
   the pointer, so a finger draws instead of scrolling. */
.marks-stage {
  position: relative;
  display: flex;
  justify-content: center;
}

.marks-stage img {
  display: block;
  max-width: 100%;
  max-height: calc(100dvh - 15rem);
  border-radius: var(--radius-sm);
  user-select: none;
  -webkit-user-drag: none;
}

.marks-stage canvas {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  touch-action: none;
  cursor: crosshair;
}

.marks-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

@media (max-width: 480px) {
  .marks-dialog { padding: var(--space-4); }
  .marks-stage img { max-height: calc(100dvh - 13rem); }
}