/*
 * TW form composition.
 *
 * Native controls are owned by controls.css. This file owns their repeatable
 * label/help/error composition and builder inspector rhythm.
 */

.tw-form-field,
.tw-inspector-field {
  display: grid;
  min-width: 0;
  gap: var(--tw-space-1);
}

.tw-form-label,
.tw-inspector-field > span {
  color: var(--tw-color-text-muted);
  font-size: var(--tw-font-meta);
  font-weight: var(--tw-weight-semibold);
  line-height: var(--tw-line-meta);
}

.tw-form-hint,
.tw-form-error,
.tw-inspector-hint {
  margin: 0;
  color: var(--tw-color-text-muted);
  font-size: var(--tw-font-meta);
  line-height: var(--tw-line-meta);
}

.tw-form-error {
  color: var(--tw-color-danger);
}

.tw-form-grid {
  --tw-form-field-min: 220px;
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, var(--tw-form-field-min)), 1fr)
  );
  gap: var(--tw-space-3);
}

.tw-form-row {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--tw-space-2);
}

.tw-inspector {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  background: var(--tw-color-surface);
  border-left: 1px solid var(--tw-color-border);
}

.tw-inspector__header,
.tw-inspector__footer {
  display: flex;
  min-height: var(--tw-toolbar-height);
  padding: var(--tw-space-2) var(--tw-space-3);
  align-items: center;
  gap: var(--tw-space-2);
  border-bottom: 1px solid var(--tw-color-border);
}

.tw-inspector__header > :first-child {
  min-width: 0;
  margin-right: auto;
}

.tw-inspector__body {
  min-height: 0;
  flex: 1;
  overflow: auto;
}

.tw-inspector__footer {
  margin-top: auto;
  justify-content: flex-end;
  border-top: 1px solid var(--tw-color-border);
  border-bottom: 0;
}

.tw-inspector-section {
  display: grid;
  padding: var(--tw-space-3);
  gap: var(--tw-space-2-5);
  border-bottom: 1px solid var(--tw-color-border);
}

.tw-inspector-section > h2,
.tw-inspector-section > h3,
.tw-inspector-section > p {
  margin: 0;
}

.tw-switch-line {
  display: flex;
  min-height: var(--tw-control);
  align-items: center;
  gap: var(--tw-space-2);
  color: var(--tw-color-text);
  font-size: var(--tw-font-ui);
  line-height: var(--tw-line-ui);
}