@layer modules {

  .forms-index {
    width: 100%;
  }

  .forms-index__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
  }

  .forms-index__title {
    font-weight: var(--font-weight-bold);
    font-size: var(--text-4xl);
    line-height: var(--text-4xl--line-height);
  }

  .forms-index__actions {
    display: flex;

    & > :not(:last-child) {
      margin-inline-end: 0.75rem;
    }
  }

  .forms-index__body {
    min-width: 100%;
  }


  /*
    Status / type pills. Distinct from the shared .badge, so kept feature-local.
  */
  .forms-pill {
    display: inline;
    padding: 0.25rem 0.5rem;
    border-radius: 3.40282e38px;
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    font-weight: var(--font-weight-semibold);
  }

  .forms-pill--purple { background-color: var(--color-purple-100); color: var(--color-purple-800); }
  .forms-pill--blue { background-color: var(--color-blue-100); color: var(--color-blue-800); }
  .forms-pill--green { background-color: var(--color-green-100); color: var(--color-green-800); }
  .forms-pill--gray { background-color: var(--color-gray-100); color: var(--color-gray-800); }
  .forms-pill--yellow { background-color: var(--color-yellow-100); color: var(--color-yellow-800); }


  .forms-empty {
    text-align: center;
    padding-block: 3rem;
  }

  .forms-empty__icon {
    margin-inline: auto;
    height: 3rem;
    width: 3rem;
    color: var(--color-gray-400);
  }

  .forms-empty__title {
    margin-top: 0.5rem;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-900);
  }

  .forms-empty__text {
    margin-top: 0.25rem;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--color-gray-500);
  }

  .forms-empty__cta {
    margin-top: 1.5rem;
  }


  .forms-page {
    margin-inline: auto;
    max-width: 48rem;
    width: 100%;
  }

  .forms-page__back {
    margin-bottom: 2rem;
  }

  .forms-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--color-slate-500);
    text-decoration: none;
    transition: var(--default-transition-duration) var(--default-transition-timing-function);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;

    &:hover {
      color: var(--color-slate-700);
    }
  }

  .forms-back-link__icon {
    width: 1rem;
    height: 1rem;
  }

  .forms-page__header {
    margin-bottom: 2rem;
  }

  .forms-page__title {
    font-size: var(--text-2xl);
    line-height: var(--text-2xl--line-height);
    font-weight: var(--font-weight-semibold);
    color: var(--color-slate-900);
    letter-spacing: var(--tracking-tight);
  }

  .forms-page__subtitle {
    margin-top: 0.25rem;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--color-slate-500);
  }


  /* form_with wrapper — display:contents so it doesn't box children */
  .form-builder {
    display: contents;
  }

  .form-builder-errors {
    background-color: var(--color-red-50);
    border: 1px solid var(--color-red-200);
    color: var(--color-red-700);
    padding: 0.75rem 1rem;
    border-radius: var(--radius-lg);
    margin-bottom: 1.5rem;
  }

  .form-builder-errors__row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .form-builder-errors__icon {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.125rem;
    flex-shrink: 0;
  }

  .form-builder-errors__heading {
    font-weight: var(--font-weight-medium);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
  }

  .form-builder-errors__list {
    margin-top: 0.375rem;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    list-style-type: disc;
    list-style-position: inside;

    & > li:not(:last-child) {
      margin-bottom: 0.125rem;
    }
  }


  .form-builder__type {
    margin-bottom: 1.5rem;
  }

  .form-builder__legend {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    font-weight: var(--font-weight-medium);
    color: var(--color-slate-700);
    margin-bottom: 0.75rem;
  }

  .form-builder__type-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 0.75rem;

    @media (min-width: 40rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .type-card {
    position: relative;
  }

  .type-card__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
  }

  /*
    The radio is the previous sibling (.type-card__input), so its checked /
    keyboard focus states drive the card via `.type-card__input:checked ~ &` /
    `:focus-visible ~ &`.
  */
  .type-card__body {
    cursor: pointer;
    border-radius: var(--radius-lg);
    border-width: 2px;
    border-color: var(--color-slate-200);
    background-color: var(--color-white);
    padding: 1rem;
    transition: var(--default-transition-duration) var(--default-transition-timing-function);
    transition-property: border-color, box-shadow, outline, outline-offset;

    &:hover {
      border-color: var(--color-slate-300);
    }

    .type-card__input:checked ~ & {
      border-color: var(--color-blue-600);
      box-shadow: 0 0 0 1px var(--color-blue-600);
    }

    .type-card__input:focus-visible ~ & {
      outline: var(--focus-ring);
      outline-offset: var(--focus-ring-offset);
    }
  }

  .type-card__layout {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .type-card__icon {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .type-card__icon--blue {
    background-color: var(--color-blue-50);
  }

  .type-card__icon--slate {
    background-color: var(--color-slate-100);
  }

  .type-card__icon-svg {
    width: 1.25rem;
    height: 1.25rem;
  }

  .type-card__icon-svg--blue {
    color: var(--color-blue-600);
  }

  .type-card__icon-svg--slate {
    color: var(--color-slate-600);
  }

  .type-card__text {
    flex: 1;
    min-width: 0;
  }

  .type-card__name {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    font-weight: var(--font-weight-medium);
    color: var(--color-slate-900);
  }

  .type-card__detail {
    margin-top: 0.125rem;
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    color: var(--color-slate-500);
  }

  /* Checkmark badge — shown only when the sibling radio is checked. */
  .type-card__check {
    flex-shrink: 0;
    display: none;

    .type-card__input:checked ~ .type-card__body & {
      display: block;
    }
  }

  .type-card__check-svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-blue-600);
  }


  .form-builder-panel {
    background-color: var(--color-white);
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-xl);
    margin-bottom: 1.5rem;
  }

  .form-builder-panel__header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-slate-100);
  }

  .form-builder-panel__header--split {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .form-builder-panel__heading {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    font-weight: var(--font-weight-medium);
    color: var(--color-slate-900);
  }

  .form-builder-panel__body {
    padding: 1.25rem;

    & > :not(:last-child) {
      margin-bottom: 1.25rem;
    }
  }

  .form-builder-panel__controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .form-builder-panel__fields {
    padding: 1.25rem;
  }

  .form-builder-field__label {
    display: block;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    font-weight: var(--font-weight-medium);
    color: var(--color-slate-700);
  }

  .form-builder-field__label--spaced {
    margin-bottom: 0.375rem;
  }

  .form-builder-field__hint {
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    color: var(--color-slate-500);
    margin-bottom: 0.75rem;
  }

  /*
    The visible focus ring + border come from base.css; we only retint it here
    via --focus-ring-color.
  */
  .form-builder-field__control {
    display: block;
    width: 100%;
    margin-top: 0.375rem;
    border-radius: var(--radius-lg);
    border-color: var(--color-slate-300);
    box-shadow: 0 1px 2px 0 var(--color-black-5);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);

    &:focus {
      --focus-ring-color: var(--color-blue-500);
    }
  }

  .form-builder-field__control--mono {
    font-family: var(--font-mono);
  }


  .visibility-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .visibility-choice {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-slate-200);
    cursor: pointer;
    transition: var(--default-transition-duration) var(--default-transition-timing-function);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;

    &:hover {
      background-color: var(--color-slate-50);
    }

    &:has(:checked) {
      border-color: var(--color-blue-600);
      background-color: var(--color-blue-50);
    }
  }

  /* Radio input — only recolours the base.css focus ring. */
  .visibility-choice__input {
    color: var(--color-blue-600);
    border-color: var(--color-slate-300);

    &:focus {
      --focus-ring-color: var(--color-blue-500);
    }
  }

  .visibility-choice__label {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--color-slate-700);
  }


  .form-builder-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-lg);
    transition: var(--default-transition-duration) var(--default-transition-timing-function);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
  }

  .form-builder-btn--section {
    color: var(--color-slate-600);
    background-color: var(--color-slate-100);

    &:hover {
      background-color: var(--color-slate-200);
    }
  }

  .form-builder-btn__icon {
    width: 1rem;
    height: 1rem;
  }


  .section-add {
    position: relative;
    display: inline-flex;
    align-items: center;
  }

  .section-add__info {
    margin-left: 0.25rem;
    color: var(--color-slate-400);
    cursor: help;

    &:focus-visible {
      outline: var(--focus-ring);
      outline-offset: var(--focus-ring-offset);
    }
  }

  .section-add__info-icon {
    width: 1rem;
    height: 1rem;
  }

  /* Shown on hover/focus of the .section-add wrapper. */
  .section-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    translate: -50% 0;
    margin-bottom: 0.5rem;
    padding: 0.5rem 0.75rem;
    background-color: var(--color-slate-900);
    color: var(--color-white);
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    border-radius: var(--radius-lg);
    opacity: 0;
    transition: opacity var(--default-transition-duration) var(--default-transition-timing-function);
    pointer-events: none;
    width: 12rem;
    text-align: center;
    z-index: 10;

    .section-add:hover &,
    .section-add:focus-within & {
      opacity: 1;
    }
  }

  .section-tooltip__arrow {
    position: absolute;
    top: 100%;
    left: 50%;
    translate: -50% 0;
    border: 4px solid transparent;
    border-top-color: var(--color-slate-900);
  }


  .field-card {
    border-width: 1px;
    border-radius: var(--radius-lg);
    padding: 1rem;
    margin-bottom: 0.75rem;
  }

  .field-card--default {
    border-color: var(--color-slate-200);
    background-color: var(--color-slate-50-50);
  }

  .field-card--section {
    border-width: 2px;
    border-color: var(--color-blue-200);
    background-color: #eff6ff80;
  }

  .field-card__grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1rem;

    @media (min-width: 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .field-card__block {
    margin-top: 1rem;
  }

  .field-card__required {
    margin-top: 1rem;
    display: flex;
    align-items: center;
  }

  /* Only recolours the base.css checkbox focus ring. */
  .field-card__checkbox {
    border-radius: 0.25rem;
    border-color: var(--color-slate-300);
    color: var(--color-blue-600);

    &:focus {
      --focus-ring-color: var(--color-blue-500);
    }
  }

  .field-card__required-label {
    margin-left: 0.5rem;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--color-slate-600);
  }


  .field-template__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
  }

  .field-template__label-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .field-template__kind {
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
  }

  .field-template__kind--slate {
    color: var(--color-slate-500);
  }

  .field-template__kind--blue {
    color: var(--color-blue-600);
  }

  .field-template__tools {
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }

  .field-template__tool {
    padding: 0.375rem;
    color: var(--color-slate-400);
    border-radius: 0.25rem;
    transition: var(--default-transition-duration) var(--default-transition-timing-function);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;

    &:hover {
      color: var(--color-slate-600);
      background-color: var(--color-slate-100);
    }
  }

  .field-template__tool--danger {
    &:hover {
      color: var(--color-red-600);
      background-color: var(--color-red-50);
    }
  }

  .field-template__tool-icon {
    width: 1rem;
    height: 1rem;
  }


  .form-builder__submit {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .form-builder-cancel {
    display: inline-flex;
    align-items: center;
    padding: 0.625rem 1.25rem;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    font-weight: var(--font-weight-medium);
    color: var(--color-slate-600);
    text-decoration: none;
    transition: var(--default-transition-duration) var(--default-transition-timing-function);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;

    &:hover {
      color: var(--color-slate-800);
    }
  }


  .forms-show {
    margin-inline: auto;
    width: 100%;

    @media (min-width: 48rem) {
      width: 66.6667%;
    }
  }

  .forms-show__back {
    margin-bottom: 1rem;
  }

  .forms-show__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
  }

  .forms-show__title {
    font-weight: var(--font-weight-semibold);
    font-size: var(--text-3xl);
    line-height: var(--text-3xl--line-height);
  }

  .forms-show__actions {
    display: flex;
    gap: 0.5rem;
  }

  .forms-action-btn__icon {
    width: 1.25rem;
    height: 1.25rem;
  }


  .forms-card {
    background-color: var(--color-white);
    box-shadow: 0 1px 3px 0 var(--color-black-10), 0 1px 2px -1px var(--color-black-10);
    border-radius: var(--radius-lg);
    margin-bottom: 1.5rem;
  }

  .forms-card--clipped {
    overflow: hidden;
  }

  .forms-card__header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--color-gray-200);
  }

  .forms-card__heading {
    font-size: var(--text-lg);
    line-height: var(--text-lg--line-height);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-900);
  }

  .forms-card__body {
    padding: 1rem 1.5rem;
  }

  .forms-card__body--overflow {
    overflow: visible;
  }


  .forms-info {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1rem;

    @media (min-width: 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .forms-info__wide {
    @media (min-width: 48rem) {
      grid-column: span 2 / span 2;
    }
  }

  .forms-info__term {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
  }

  .forms-info__detail {
    margin-top: 0.25rem;
  }

  .forms-info__detail--text {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--color-gray-900);
  }

  .forms-info__note {
    margin-top: 0.25rem;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--color-gray-500);
  }

  .forms-info__pre {
    white-space: pre-line;
  }


  .forms-share {
    & > :not(:last-child) {
      margin-bottom: 1rem;
    }
  }

  .forms-share__label {
    display: block;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
    margin-bottom: 0.5rem;
  }

  .forms-share__row {
    display: flex;
    align-items: center;

    & > :not(:last-child) {
      margin-inline-end: 0.5rem;
    }
  }

  .forms-share__input {
    flex: 1;
    border-radius: var(--radius-md);
    border-color: var(--color-gray-300);
    background-color: var(--color-gray-50);
    box-shadow: 0 1px 2px 0 var(--color-black-5);

    &:focus {
      --focus-ring-color: var(--color-blue-500);
    }

    @media (min-width: 40rem) {
      font-size: var(--text-sm);
      line-height: var(--text-sm--line-height);
    }
  }

  /* Share panel reuses .empty-state; only the padding and the gap below the
     blurb before the generate button are feature-specific. */
  .empty-state--forms-share {
    --empty-state-padding-block: 1.5rem;
  }

  .empty-state--forms-share .empty-state__text {
    margin-bottom: 1rem;
  }


  .forms-field-list {
    & > :not(:last-child) {
      margin-bottom: 0.75rem;
    }
  }

  .forms-fields-empty {
    color: var(--color-gray-500);
    text-align: center;
    padding-block: 2rem;
  }


  .field-preview {
    position: relative;
    padding-left: 1rem;
    border-left: 2px solid var(--color-gray-200);
    transition: var(--default-transition-duration) var(--default-transition-timing-function);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;

    &:hover {
      border-color: var(--color-blue-400);
    }
  }

  .field-preview__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
  }

  .field-preview__main {
    flex: 1;
    min-width: 0;
  }

  .field-preview__heading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .field-preview__label {
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-900);
  }

  .field-preview__required {
    color: var(--color-red-500);
    margin-left: 0.125rem;
  }

  .field-preview__description {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--color-gray-500);
    margin-top: 0.25rem;
    white-space: pre-line;
  }

  .field-preview__type {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    font-weight: var(--font-weight-medium);
    background-color: var(--color-gray-100);
    color: var(--color-gray-600);
    flex-shrink: 0;
  }

  .field-preview__options {
    margin-top: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
  }

  .field-preview__option {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 3.40282e38px;
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    background-color: var(--color-blue-50);
    color: var(--color-blue-700);
    border: 1px solid var(--color-blue-100);
  }
}

@layer modules {
  .form-field--indented {
    margin-left: 2rem;
    border-left: 4px solid var(--color-blue-200);
  }
}