/**
 * Inline editing controls. They are deliberately invisible: an organizer switching a section into
 * edit mode should see the same page with a caret in it, not a form.
 */
._editing_17s6f_5 {
  position: relative;
}

._input_17s6f_9 {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-align: inherit;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 2px;
  outline: none;
  resize: none;
  overflow: hidden;
}
._input_17s6f_9:focus {
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.06);
  background: rgba(0, 0, 0, 0.04);
}
._input_17s6f_9::placeholder {
  color: var(--secondaryText);
  opacity: 0.6;
}
._input_17s6f_9[data-translating] {
  box-shadow: inset 2px 0 0 var(--darker);
  padding-left: var(--spacing-sm);
}

._body_17s6f_39 {
  display: block;
}
._body_17s6f_39 ul,
._body_17s6f_39 ol {
  padding: 0 0 0 22px;
}
._body_17s6f_39 blockquote {
  margin: var(--spacing-md) 0;
  padding-left: var(--spacing-md);
  border-left: 3px solid var(--border);
  color: var(--secondaryText);
}

._emptyImage_17s6f_53 {
  display: block;
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  background: var(--bgLight);
}
._emptyImage_17s6f_53 svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--secondaryText);
}
._emptyImage_17s6f_53._round_17s6f_69 {
  width: 80px;
  padding-top: 0;
  height: 80px;
  border-radius: 50%;
  margin: 0 auto;
}

._imageEditor_17s6f_77 {
  display: block;
  position: relative;
}
._imageEditor_17s6f_77 img {
  display: block;
}

/** The picture is the button: clicking anywhere on it opens the file dialog. */
._imageButton_17s6f_86 {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: var(--radius-md);
  overflow: hidden;
}
._imageButton_17s6f_86 img {
  display: block;
  width: 100%;
}
._imageButton_17s6f_86:hover ._imageHint_17s6f_101, ._imageButton_17s6f_86:focus-visible ._imageHint_17s6f_101 {
  opacity: 1;
}

/** The upload glyph, centred over whatever the tile currently holds. */
._imageHint_17s6f_101 {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  opacity: 0;
  transition: opacity 0.15s;
}
._imageHint_17s6f_101 svg {
  width: 28px;
  height: 28px;
}
@media (hover: none) {
  ._imageHint_17s6f_101 {
    opacity: 1;
    background: rgba(0, 0, 0, 0.3);
  }
}

/**
 * An empty slot has no photo to sit over, so the icon carries no scrim and takes the muted colour
 * of the dashed frame it sits in. It is always visible: there is nothing else in the tile to
 * suggest that clicking it does anything.
 */
._imageButton_17s6f_86 ._emptyImage_17s6f_53 ~ ._imageHint_17s6f_101 {
  opacity: 1;
  background: none;
  color: var(--secondaryText);
}

._imageRemove_17s6f_139 {
  position: absolute;
  top: var(--spacing-sm);
  right: var(--spacing-sm);
  z-index: 2;
}

/** What an unfilled field looks like in the builder: the label, greyed, in the real typography. */
._placeholder_17s6f_147 {
  color: var(--secondaryText);
  opacity: 0.6;
}