/* App-specific additions (not part of the design-handoff CSS).
   Uses the design tokens so it stays consistent + re-skinnable. */

/* ---------- Modal dialog ---------- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: var(--s-6);
  background: rgba(45, 38, 30, .42); backdrop-filter: blur(4px);
  animation: mfade var(--dur) var(--ease-out) both;
}
@keyframes mfade { from { opacity: 0; } to { opacity: 1; } }
.modal-card {
  width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 20px; box-shadow: var(--shadow-lg); padding: 24px 24px 22px;
  animation: viewIn var(--dur) var(--ease-out) both;
}
.modal-head { display: flex; align-items: center; gap: var(--s-3); margin-bottom: 6px; }
.modal-head h3 { font-family: var(--font-display); font-weight: 500; font-size: 21px; margin: 0; flex: 1; }
.modal-sub { color: var(--muted); font-size: 13px; margin: 0 0 18px; }
.modal-x {
  background: var(--surface-2); border: 1px solid var(--line); color: var(--muted);
  width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; cursor: pointer;
  transition: color var(--dur-fast), border-color var(--dur-fast); flex: none;
}
.modal-x:hover { color: var(--ink); border-color: var(--line-2); }
.modal-foot { display: flex; justify-content: flex-end; gap: var(--s-3); margin-top: var(--s-5); }
.field label .opt { color: var(--faint); font-weight: 500; font-size: 11px; margin-left: 6px; text-transform: none; }