/* Placement mode panel (?edit=1). A working tool, kept plain and legible. */

.edit {
  position: absolute;
  z-index: 6;
  top: calc(var(--edge) + 56px + env(safe-area-inset-top, 0px));
  right: calc(var(--edge) + env(safe-area-inset-right, 0px));
  box-sizing: border-box;
  width: min(350px, calc(100vw - 2 * var(--edge)));
  padding: 16px 16px 14px;
  border: 1px solid rgb(46 32 24 / 0.2);
  border-top: 2px solid var(--terracotta);
  border-radius: 3px;
  background: rgb(251 247 238 / 0.95);
  box-shadow: 0 22px 50px -26px rgb(74 54 32 / 0.55);
  font-size: 15px;
  line-height: 1.35;
}

.edit[hidden] {
  display: none;
}

/* Pins must not swallow clicks meant for the model: placing a point right
   beside (or under) an existing pin has to work. */
.labels--editing .pin {
  pointer-events: none;
}

/* On a wide screen the model is framed beside the panel, not under it: ui.js
   gives the camera the panel's width as a right-hand inset (from 900px wide). */

.edit__title {
  margin: 0 0 4px;
  font-size: 19px;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.edit__hint {
  margin: 0 0 12px;
  color: var(--ink-70);
  font-size: 14px;
  font-style: italic;
}

.edit__row {
  display: block;
  margin: 0 0 10px;
}

.edit__key {
  display: block;
  margin-bottom: 3px;
  color: var(--ink-70);
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.edit__key small {
  font-size: inherit;
  letter-spacing: 0.04em;
  text-transform: none;
}

.edit__point,
.edit__select,
.edit__json {
  box-sizing: border-box;
  width: 100%;
  border: 1px solid rgb(46 32 24 / 0.22);
  border-radius: 2px;
  background: #fffdf8;
  color: var(--ink);
  font: 12.5px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.edit__point {
  display: block;
  padding: 6px 8px;
  user-select: all;
}

.edit__select {
  padding: 6px 6px;
}

.edit__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 10px;
}

.edit__button {
  flex: 1 1 auto;
  padding: 7px 12px 8px;
  border: 1px solid var(--ink);
  border-radius: 2px;
  background: var(--ink);
  color: var(--halo);
  font: inherit;
  font-size: 15px;
  letter-spacing: 0.03em;
  cursor: pointer;
}

.edit__button--quiet {
  background: transparent;
  color: var(--ink);
}

.edit__button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.edit__button:focus-visible,
.edit__select:focus-visible,
.edit__json:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 2px;
}

.edit__status {
  min-height: 2.7em;
  margin: 0 0 8px;
  color: var(--ink-70);
  font-size: 13.5px;
  font-style: italic;
}

.edit__json {
  display: block;
  height: 122px;
  padding: 6px 8px;
  font-size: 11px;
  white-space: pre;
  resize: vertical;
}

/* Placement mode is a desk tool, but it should not fall apart on a phone:
   the panel becomes a bottom sheet and the page chrome makes room for it. */
@media (max-width: 640px) {
  .edit {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    height: 46vh;
    height: 46dvh;
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    overflow: auto;
    border-radius: 0;
  }

  [data-mode="edit"] .stage {
    bottom: 46vh;
    bottom: 46dvh;
  }

  [data-mode="edit"] .disclaimer {
    display: none;
  }

  [data-mode="edit"] .names {
    top: calc(var(--edge) + env(safe-area-inset-top, 0px));
    right: var(--edge);
    bottom: auto;
    left: auto;
    transform: none;
  }
}