/* modals.css
   Modal shell and form fields.

   Part of the Teleport stylesheet, split by concern. index.html links these
   in source order; keep that order, the cascade depends on it. */

.modal-overlay {
  position: fixed; inset: 0; z-index: 300; padding: 18px;
  background: rgba(10,10,20,0.42); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  animation: fadeIn 0.15s ease;
}
.modal {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xl); box-shadow: var(--shadow-lg);
  width: 100%; max-width: 560px; max-height: 92vh;
  display: flex; flex-direction: column;
  animation: scaleIn 0.2s cubic-bezier(0.34,1.56,0.64,1) both;
}
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px 4px; }
.modal-title { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.modal-close {
  width: 30px; height: 30px; border-radius: 50%; border: none; background: none;
  color: var(--label-3); font-size: 17px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.12s, color 0.12s;
}
.modal-close:hover { background: var(--surface-2); color: var(--label); }
.modal-body { padding: 14px 22px 4px; overflow-y: auto; }
.modal-foot { padding: 16px 22px 20px; display: flex; gap: 10px; justify-content: space-between; align-items: center; }
.modal-foot-right { display: flex; gap: 10px; margin-left: auto; }

/* Two-up form grid. A field opts out with grid-column:1 / -1 (see ui/modal.js). */
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.field { margin-bottom: 14px; min-width: 0; }
.field-label {
  display: block; font-size: 11.5px; font-weight: 650; color: var(--label-2);
  text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px;
}
.field-hint { font-size: 11.5px; color: var(--label-3); margin-top: 5px; line-height: 1.4; }

.field-input, .field-select, .field-textarea {
  width: 100%; padding: 9px 12px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  font-size: 14px; color: var(--label); outline: none; appearance: none;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.field-input:focus, .field-select:focus, .field-textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); background: var(--surface);
}
.field-textarea { min-height: 84px; resize: vertical; line-height: 1.55; font-family: var(--font); }
.field-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239a9aa6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center;
  padding-right: 30px; cursor: pointer;
}

/* Auto-growing fields read as one line but wrap and grow instead of scrolling
   sideways. autoGrow() in util.js sets the height from scrollHeight. */
textarea.autogrow {
  display: block; resize: none; overflow: hidden;
  font-family: var(--font); line-height: 1.6;
  white-space: pre-wrap; overflow-wrap: break-word;
  min-width: 0;   /* a textarea's intrinsic `cols` width must not widen its grid track */
}