/* ========================================
   FIELD LIST COMPONENT
   Stacked label + input rows with borders.

   Usage:
     <div class="field-list">
       <div class="field-list__item">
         <label>Label</label>
         <input ...>
       </div>
       <div class="field-list__item">
         <label>Label</label>
         <select ...></select>
       </div>
       <div class="field-list__footer">
         <span>Created: ...</span>
       </div>
     </div>
   ======================================== */

.field-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.field-list__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--card-stroke);
}

.field-list__item:last-child {
  border-bottom: none;
}

.field-list__item label {
  font-size: var(--font-size-other-caption);
  color: var(--text-medium-emphasis);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.field-list__item input:not([type="checkbox"]):not([type="radio"]),
.field-list__item select {
  height: var(--input-height);
  font-size: var(--font-size-body-fine-print);
  font-weight: var(--font-weight-semibold);
  color: var(--text-high-emphasis);
}

.field-list__footer {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 16px;
  font-size: var(--font-size-other-caption);
  color: var(--text-low-emphasis);
}

/* Content-proportional form composition; rows share the form's outer edges. */
.form-layout {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 392px;
  container-type: inline-size;
}
.form-layout__row {
  display: grid;
  gap: 16px;
}
.form-layout__row--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-layout__field--span-two { grid-column: span 2; }
.form-layout__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.form-layout__field > .form-control { width: 100%; }
.form-layout__actions { margin-top: 8px; }
.form-layout[hidden] { display: none; }
@container (max-width: 359px) {
  .form-layout__row--three { grid-template-columns: minmax(0, 1fr); }
  .form-layout__field--span-two { grid-column: auto; }
}

/* Shared label/control composition, independent of the Axiom documentation shell. */
.form-field { display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-width: 0; }
.form-field__label { font-size: var(--font-size-other-caption); font-weight: var(--font-weight-semibold); color: var(--text-medium-emphasis); margin: 0; text-align: left; }
.form-field__hint { font-size: var(--font-size-other-caption); color: var(--text-medium-emphasis); }