/* Modal overlay */
#modal-overlay {
  position: fixed; inset: 0;
  background: rgba(40,60,50,.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 100; padding: 16px;
}
#modal-overlay.modal-hidden { display: none; }

.modal-card {
  background: var(--surface); border-radius: var(--radius-lg);
  width: 100%; max-width: 480px; max-height: 90vh;
  overflow-y: auto; box-shadow: 0 8px 48px rgba(0,0,0,.2);
}
.modal-header {
  background: var(--nav); padding: 14px 20px;
  display: flex; align-items: center; justify-content: space-between;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.modal-contact { font-family: var(--font-serif); font-size: 15px; color: var(--text-nav); }
.modal-sub { font-size: 9px; text-transform: uppercase; letter-spacing: .1em; color: var(--text-secondary); }
.modal-type-badge { background: var(--sage); border-radius: var(--radius-sm); padding: 5px 12px; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-nav); }
.modal-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }

/* Pill groups */
.pill-group { display: flex; flex-wrap: wrap; gap: 6px; }
.pill {
  padding: 6px 13px; border-radius: 20px; font-size: 11px; font-weight: 600;
  cursor: pointer; border: 1.5px solid var(--border);
  background: var(--surface-2); color: var(--text-secondary);
  transition: all .12s;
}
.pill.selected { background: var(--sage); border-color: var(--sage); color: var(--text-nav); }
.pill.warn { border-color: var(--overdue-bg); background: #fdf4ef; color: var(--overdue); }
.pill.warn.selected { background: var(--overdue); border-color: var(--overdue); color: #fff; }

/* Next touch preview */
.next-touch-row {
  background: var(--surface-2); border-radius: var(--radius-sm);
  padding: 10px 14px; display: flex; align-items: center; justify-content: space-between;
}
.nt-label { font-size: 9px; text-transform: uppercase; letter-spacing: .1em; color: var(--text-secondary); margin-bottom: 2px; }
.nt-value { font-family: var(--font-serif); font-size: 13px; color: var(--text-primary); }
.nt-change { font-size: 10px; color: var(--sage); font-weight: 600; text-decoration: underline; cursor: pointer; }

.modal-actions { display: flex; gap: 8px; }
.modal-actions .btn-primary { flex: 1; }

/* Contextual sub-field */
.sub-field { margin-top: 8px; padding: 10px 12px; background: var(--surface-3); border-radius: var(--radius-sm); border-left: 3px solid var(--sage); }
.sub-field .field-label { margin-bottom: 6px; }

/* Add contact form styles */
.type-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.type-btn { padding: 8px 4px; border-radius: var(--radius-sm); border: 1.5px solid var(--border); background: var(--surface-2); color: var(--text-secondary); font-size: 10px; font-weight: 600; text-align: center; cursor: pointer; line-height: 1.3; transition: all .12s; }
.type-btn.selected { background: var(--sage); border-color: var(--sage); color: var(--text-nav); }
.stage-pills { display: flex; gap: 8px; }
.stage-pill { flex: 1; padding: 8px; border-radius: var(--radius-sm); text-align: center; font-size: 10px; font-weight: 700; cursor: pointer; border: 1.5px solid var(--border); background: var(--surface-2); color: var(--text-secondary); transition: all .12s; }
.stage-pill.tepid.selected     { background: var(--sage-light); border-color: var(--sage); color: var(--text-primary); }
.stage-pill.simmering.selected { background: var(--simmering-bg); border-color: var(--simmering); color: var(--simmering); }
.stage-pill.boiling.selected   { background: var(--boiling-bg); border-color: var(--boiling); color: var(--boiling); }
.campaign-row { background: var(--nav); border-radius: var(--radius-sm); padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; }
.cr-label { font-size: 9px; text-transform: uppercase; letter-spacing: .1em; color: var(--text-secondary); margin-bottom: 2px; }
.cr-value { font-family: var(--font-serif); font-size: 13px; color: var(--text-nav); }
.cr-value em { font-style: italic; color: var(--accent-nav); }
.input-row { display: flex; gap: 10px; }
.input-row .field { flex: 1; }