.form {
}

  .form .field-group {
    margin-top: 20px;
    line-height: 1.4rem;
    position: relative;
  }

    .form .field-group.small {
      font-size: .85rem;
      line-height: 1.1rem;
    }

    .form .field-group label:not(.multi-switch-label) {
      display: block;
      font-size: .8rem;
      line-height: .8rem;
      font-weight: 600;
      letter-spacing: .5px;
      margin-bottom: 0.2rem;
      color: var(--sub-text-color);
      font-family: var(--font-sans-serif);
      text-align: left;
      padding-left: 8px;
    }

    .form .field-group label.no-indent {
      padding-left: 0;
    }

    .form .field-group .unit-list {
    }

      .form .field-group .unit-list ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
      }

        .form .field-group .unit-list ul li {
          margin-top: 5px;
        }

      .form .field-group .unit-list input[type='checkbox'] {
        display: inline-block;
        vertical-align: middle;
        margin: 0;
      }

      .form .field-group .unit-list label {
        display: inline-block;
        vertical-align: middle;
        margin: 0;
      }

    .form .field-group .list-chooser {
      position: relative;
    }

      .form .field-group .list-chooser ul {
        position: relative;
        border: 1px solid var(--border-color);
        border-radius: var(--button-radius);
        margin: 0;
        padding: 5px 10px;
        list-style: none;
        transition: .2s all;
      }

        .form .field-group .list-chooser ul.target-list {
          border-color: var(--color-success);
        }

        .form .field-group .list-chooser ul li {
          margin: 5px 0;
          border: 1px solid var(--border-color);
          cursor: grab;
          transition: box-shadow .2s, background .2s;
          user-select: none;
          background: white;
        }

          .form .field-group .list-chooser ul li:active {
            cursor: grabbing;
          }

          .form .field-group .list-chooser ul li:hover {
            background: var(--color-lightest);
            box-shadow: var(--shadow-near);
          }

          .form .field-group .list-chooser ul li.drag-over {
            background: var(--color-light);
            border-color: var(--color-2) !important;
          }

          .form .field-group .list-chooser ul li.dragging {
            background: var(--color-lighter);
            opacity: 0.5;
          }

  .form input[type='text'],
  .form input[type='email'],
  .form input[type='tel'],
  .form input[type='search'],
  .form input[type='number'],
  .form input[type='password'],
  .form input[type='date'],
  .form input[type='datetime'],
  .form input[type='datetime-local'],
  .form textarea {
    width: 75%;
  }

  .form select {
    width: auto;
  }

  .form input[type='checkbox'] {
    width: 20px;
    height: 20px;
  }

  .form input[type='number'] {
    min-width: 50px !important;
  }

  .form input:disabled,
  .form textarea:disabled,
  .form select:disabled,
  .form input[readonly],
  .form textarea[readonly] {
    opacity: .5;
  }

  /* Read-only fields are still focusable, so suppress the interactive affordances
     that would otherwise suggest the value can be changed. */
  .form input[readonly],
  .form textarea[readonly] {
    cursor: default;
  }

    .form input[readonly]:focus,
    .form textarea[readonly]:focus {
      outline: none;
      border-color: var(--border-color);
      box-shadow: none;
    }

  .form.full-width-fields input[type='text'],
  .form.full-width-fields input[type='email'],
  .form.full-width-fields input[type='tel'],
  .form.full-width-fields input[type='search'],
  .form.full-width-fields input[type='number'],
  .form.full-width-fields input[type='password'],
  .form.full-width-fields input[type='date'],
  .form.full-width-fields input[type='datetime'],
  .form.full-width-fields input[type='datetime-local'],
  .form.full-width-fields textarea,
  .form.full-width-fields select {
    width: 100%;
  }

  .form input.unsaved-changes {
    background: var(--color-warning-light);
  }

  /* Inline/auto-saving fields. Add the .auto-save class to any input, textarea, or
     select that persists as you edit it. The border turns blue while focused, then
     the border and background flash the success color and fade back once the value
     has been stored. Toggle the .saved class from the component after a successful save. */
  .auto-save {
    transition: border-color .2s ease-in-out;
  }

    .auto-save:focus {
      border-color: var(--color-2) !important;
      outline: none;
    }

    .auto-save.saved,
    .auto-save.saved:focus {
      border-width: 1px !important;
      border-style: solid !important;
      animation: auto-save-saved 1.5s ease-out forwards;
    }

@keyframes auto-save-saved {
  0%, 55% {
    border-color: var(--color-success) !important;
    background-color: color-mix(in srgb, var(--color-success) 25%, transparent);
  }

  100% {
    border-color: var(--border-color) !important;
    background-color: transparent;
  }
}

  .form .control-buttons {
    margin-top: 40px;
    display: flex;
    align-items: center;
    align-content: flex-start;
    justify-content: flex-start;
    padding-top: 20px;
    position: relative;
    border-top: 1px solid var(--border-color);
  }

    .form .control-buttons .button {
      margin-right: 10px;
    }

    /* The button group is usually wrapped in a plain div. Making it a flex row keeps
       <button> and <a> siblings on the same box alignment instead of text baselines. */
    .form .control-buttons > div {
      display: flex;
      align-items: center;
    }

      .form .control-buttons .button.right {
        margin-left: auto !important;
      }

    .form .control-buttons .message {
      color: var(--sub-text-color);
      font-size: .9rem;
      line-height: .9rem;
      margin-left: auto;
    }

      .form .control-buttons .message.fade-out {
        animation: fade-out 8s forwards;
        font-weight: 700;
      }

      .form .control-buttons .message.error {
        color: var(--color-error);
      }

  .form.content-editor {
    display: grid;
    grid-template-rows: minmax(0, 1fr) 100px;
    height: 100%;
  }

    .form.content-editor .editor {
      overflow-y: auto;
      height: 100%;
    }

      .form.content-editor .editor textarea {
        height: 100%;
      }

.field-group .top-right-link {
  font-size: .85rem;
  line-height: .85rem;
  color: var(--link-color);
  cursor: pointer;
  margin-bottom: 0.5rem;
  border: 1px solid var(--link-color);
  border-radius: var(--button-radius);
  padding: .35rem .5rem;
}

.field-group .top-right-link i {
  margin-right: .35rem;
  font-weight: 500;
}

.field-group .field-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

  .field-group .field-label-row label {
    margin-bottom: 0.2rem;
    align-content: flex-end;
    align-items: flex-end;
  }

/* Wrapper so the "Generating…" indicator can be overlaid on top of the input or
   textarea it is filling. The field itself is disabled while generating, so the
   overlay does not need to block pointer events. */
.ai-field {
  position: relative;
}

.ai-field-loading {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
  /* Match the input/textarea typography and padding exactly so the placeholder
     text lands where the generated value will appear. align-items:flex-start
     keeps it on the first line of a multi-row textarea. */
  font: var(--input-font);
  color: var(--text-color);
  padding: .75rem;
  pointer-events: none;
}

.ai-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid var(--link-color);
  border-top-color: transparent;
  border-radius: 50%;
  animation: ai-spin .6s linear infinite;
}

.ai-field-loading .ai-spinner {
  /* Sized and coloured from the surrounding field text so it always matches. */
  width: 1em;
  height: 1em;
  border-color: currentColor;
  border-top-color: transparent;
}

@keyframes ai-spin {
  to {
    transform: rotate(360deg);
  }
}