/* Input screen shell */
#inputView {
  display: grid;
  gap: var(--section-gap);
}

.view-input {
  max-width: 52rem;
  margin: 0 auto;
}

.introCard {
  display: grid;
  gap: var(--card-gap);
  padding: var(--panel-padding);
}

.sectionHeader {
  display: grid;
  position: relative;
  z-index: 1;
  gap: var(--space-2);
}

.sectionLead {
  color: var(--color-text-muted);
  max-width: none;
}

.fieldLabel {
  color: var(--color-text-muted);
  font-size: var(--text-small);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.actionRow {
  display: flex;
  justify-content: flex-start;
}

.actionRow .button {
  width: auto;
  min-width: 12rem;
}

textarea {
  width: 100%;
  min-height: var(--field-height);
  padding: var(--field-padding-y) var(--field-padding-x);
  resize: vertical;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--main1-raised);
  color: var(--color-text);
  font-size: var(--text-field);
  line-height: 1.55;
}

textarea::placeholder {
  color: var(--color-text-soft);
}

@media (max-width: 720px) {
  .introCard {
    padding: var(--panel-padding-mobile);
  }

  .actionRow .button {
    width: 100%;
    min-width: 0;
    flex-basis: auto;
  }
}

@media (max-width: 520px) {
  textarea {
    min-height: 15rem;
  }
}