/*
 * The right-side edit overlay (slice 89 revision): a turbo-frame fixed to the
 * viewport's right edge. Hidden while empty; content (drawer__panel) fills and
 * scrolls it. Sits above the page chrome but BELOW the picker dropdown (z 30) —
 * the form's own pickers must pop over the panel.
 */
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(30rem, 100vw);
  z-index: 25;
  display: block;
  overflow-y: auto;
  background: var(--color-white);
  border-left: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  padding: var(--space-6, 1.5rem);
}

.drawer:not(:has(*)) {
  display: none;
}

.drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2, 0.5rem);
  margin-bottom: var(--space-4, 1rem);
}

.drawer__title {
  font-size: var(--text-base);
  margin: 0;
}

/* Air between the form's submit button and the card that follows it. */
.drawer__panel > .card {
  margin-top: var(--space-6, 1.5rem);
}

/* The "Mapped here" card's rows — same density as the chart table behind the drawer. */
.drawer-contents {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-xs);
}

.drawer-contents td {
  padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem) var(--space-1, 0.25rem) 0;
  border-bottom: 1px solid var(--color-border);
}

.drawer-contents__number {
  width: 4rem;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-body); /* the house muted tone (.muted) */
}