/* =========================================================================
   Shared — Form fields (labels, textareas, read-only displays)
   ========================================================================= */

/* ---- Field label (eyebrow style) --------------------------------------- */
.field-label {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
  margin-top: 0.6rem;
}
.field-label:first-of-type { margin-top: 0; }

/* ---- Textarea ---------------------------------------------------------- */
textarea {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.55;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  color: var(--text);
  padding: 0.6rem 0.75rem;
  resize: vertical;
  transition: border-color var(--dur-micro) var(--ease),
              background   var(--dur-comp)  var(--ease);
}
textarea:focus {
  outline: none;
  border-color: var(--teal-border);
  background: rgba(60, 165, 154, 0.04);
}
textarea:disabled { opacity: 0.4; }
textarea.field-flash { background: rgba(60, 165, 154, 0.07); }
textarea.persona-faded { opacity: 0.3; transition: opacity var(--dur-comp) var(--ease); }

/* ---- Read-only display field ------------------------------------------ */
.readonly-field {
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--text-dim);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 0.6rem 0.75rem;
  white-space: pre-wrap;
}