@layer modules {
  .builder-page {
    margin-inline: auto;
    width: 100%;
    max-width: 52rem;
  }

  .builder {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }


  .builder-tally {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
  }


  .builder-title,
  .builder-lede {
    display: block;
    width: calc(100% + 0.75rem);
    margin-inline: -0.375rem;
    padding: 0.25rem 0.375rem;
    border: 0;
    border-radius: var(--radius-md);
    background: none;
    box-shadow: inset 0 0 0 1px var(--color-gray-100);
    resize: none;

    @media (any-hover: hover) {
      &:hover {
        background-color: var(--color-surface-muted);
        box-shadow: inset 0 0 0 1px var(--color-border);
      }
    }

    &:focus {
      outline: none;
      background-color: var(--color-surface);
      box-shadow: var(--bevel-well-focus);
    }
  }

  .builder-title {
    font-size: var(--text-2xl);
    line-height: 1.2;
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text);
  }

  .builder-lede {
    field-sizing: content;
    min-height: 2lh;
    margin-top: 0.5rem;
    font-size: var(--text-base);
    line-height: var(--text-base--line-height);
    color: var(--color-text-soft);
  }

  .builder-title::placeholder,
  .builder-lede::placeholder {
    color: var(--color-gray-300);
  }


  .builder-settings {
    align-items: start;
    gap: 1.5rem 2.5rem;
  }

  .builder-setting__legend {
    margin-bottom: 0.5rem;
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-text-muted);
  }

  .builder-outline {
    padding: 0.5rem 0.75rem;
  }

  .builder-outline__step-one {
    display: none;
    margin: 0.375rem 0 0.5rem 0.5rem;
  }

  .builder-outline[data-stepped] .builder-outline__step-one {
    display: block;
  }

  .builder-outline[data-sectioned-start] .builder-outline__step-one {
    display: none;
  }

  .builder-outline__blank {
    display: none;
    padding-block: 2rem;
    text-align: center;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--color-text-muted);
  }

  .builder-outline[data-empty] .builder-outline__blank {
    display: block;
  }

  .builder-outline__step-one,
  .builder-row__step {
    width: fit-content;
    white-space: nowrap;
  }


  .builder-row {
    border-radius: var(--radius-lg);

    & + .builder-row .builder-row__summary {
      box-shadow: 0 -1px 0 0 var(--color-gray-100);
    }

    &[data-open] {
      margin-block: 0.5rem;
      background-color: var(--color-surface);
      box-shadow: var(--bevel);
    }

    &[data-open] + .builder-row .builder-row__summary,
    &[data-open] .builder-row__summary {
      box-shadow: none;
    }
  }

  .builder-row__summary {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 2.75rem;
    padding: 0.375rem 0.5rem;
    border-radius: var(--radius-lg);

    @media (any-hover: hover) {
      &:hover {
        background-color: var(--color-surface-muted);
      }
    }
  }

  .builder-row__disclosure {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
    border-radius: var(--radius-md);
    text-align: start;
  }

  .builder-row__handle {
    position: relative;
    display: flex;
    align-self: stretch;
    align-items: center;
    padding: 0.25rem 0.125rem;
    font-size: 1rem;
    color: var(--color-gray-300);
    cursor: grab;
    touch-action: none;

    &::after {
      content: "";
      position: absolute;
      inset-block: -0.375rem;
      inset-inline: -0.25rem;
    }

    .builder-row:hover & {
      color: var(--color-gray-500);
    }

    &:active {
      cursor: grabbing;
    }

    &:focus-visible {
      outline: var(--focus-ring);
      border-radius: var(--radius-sm);
    }
  }

  .builder-row__icon {
    font-size: 1.125rem;
    color: var(--color-gray-400);
  }

  .builder-row__title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--color-text);

    &:empty::before {
      content: attr(data-placeholder);
      color: var(--color-text-muted);
      font-style: italic;
    }
  }

  .builder-row__kind {
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    color: var(--color-text-muted);
    white-space: nowrap;

    @media (max-width: 40rem) {
      display: none;
    }
  }

  .builder-row__flag {
    display: none;
  }

  .builder-row:has(.builder-editor__toggle input:checked) .builder-row__flag {
    display: inline-flex;
  }

  .builder-row__tools {
    display: flex;
    gap: 0.25rem;
    opacity: 0;
    transition: opacity var(--default-transition-duration) var(--default-transition-timing-function);

    .builder-row:hover &,
    .builder-row:focus-within &,
    .builder-row[data-open] & {
      opacity: 1;
    }

    @media (any-hover: none) {
      opacity: 1;
    }

    & .icon-btn {
      width: 1.875rem;
      height: 1.875rem;
    }

    & .icon-btn::after {
      inset-block: -0.4375rem;
      inset-inline: -0.0625rem;
    }
  }

  .builder-row__caret {
    font-size: 0.875rem;
    color: var(--color-gray-400);
    transition: rotate var(--default-transition-duration) var(--default-transition-timing-function);

    .builder-row[data-open] & {
      rotate: 180deg;
    }
  }


  .builder-row__step {
    display: none;
  }

  .builder-row--section {
    .builder-row__step {
      display: block;
    }

    .builder-row__icon,
    .builder-row__kind {
      display: none;
    }

    .builder-row__title {
      flex: 0 1 auto;
      font-weight: var(--font-weight-semibold);
    }

    .builder-row__disclosure::after {
      content: "";
      flex: 1;
      min-width: 1.5rem;
      border-top: 1px dashed var(--color-blue-200);

      @media (max-width: 40rem) {
        display: none;
      }
    }

    .builder-row__caret {
      order: 1;
    }
  }

  .builder-row--content .builder-row__title {
    color: var(--color-text-soft);
  }


  .builder-row--ghost .builder-row__summary {
    background-color: var(--color-blue-50);
    box-shadow: inset 0 0 0 1px var(--color-blue-200);

    & > * {
      visibility: hidden;
    }
  }

  .builder-row--chosen {
    box-shadow: var(--bevel-lg);
  }


  .builder-row__editor {
    padding: 0.25rem 0.75rem 1rem 2.375rem;

    &[hidden] {
      display: none;
    }

    & > * + * {
      margin-top: 0.875rem;
    }
  }

  .builder-editor__row {
    display: grid;
    gap: 0.875rem;

    @media (min-width: 48rem) {
      grid-template-columns: 1fr 14rem;
    }
  }

  .builder-editor__field .form-control {
    margin-top: 0.3125rem;
  }

  .builder-editor__field .form-hint + .form-control {
    margin-top: 0.375rem;
  }

  .builder-editor__list {
    field-sizing: content;
    min-height: 5lh;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: 1.6;
  }

  .builder-editor__rich-text {
    display: block;
    width: 100%;
  }

  .builder-editor__options,
  .builder-editor__acknowledgment {
    display: none;
  }

  .builder-row:is([data-field-type="select"], [data-field-type="multiselect"]) .builder-editor__options {
    display: block;
  }

  .builder-row[data-field-type="checkbox"] .builder-editor__acknowledgment {
    display: block;
  }

  .builder-editor__acknowledgment {
    margin-top: 0.25rem;
  }

  .builder-editor__toggle {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 0.625rem;
    row-gap: 0.125rem;
    width: fit-content;
    cursor: pointer;

    & .form-hint {
      grid-column: 2;
      font-size: var(--text-xs);
      line-height: var(--text-xs--line-height);
    }
  }

  .builder-add__note {
    flex: 1;
    min-width: 14rem;
    text-align: end;
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    color: var(--color-text-muted);
    text-wrap: pretty;
  }


  .builder-locked {
    max-width: 62ch;
    margin-block: 0.5rem 1rem;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--color-text-soft);
    text-wrap: pretty;
  }

  .builder-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
  }

  @media (prefers-reduced-motion: reduce) {
    .builder-row__caret,
    .builder-row__tools {
      transition: none;
    }
  }
}