/* ============================================================
   Someday — shared "add a…" modal
   Style mirrors add_date_modal.html. Used on every page that
   has an "add a…" button (auto-wired by add_modal.js).
   ============================================================ */
.am-overlay {
  position: fixed; inset: 0;
  background: rgba(30,31,48,0.68);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  padding: 2rem 1rem; z-index: 3000;
  opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
}
.am-overlay.open { opacity: 1; pointer-events: auto; }

.am-modal {
  background: #F4EFE3; border-radius: 16px;
  width: 100%; max-width: 480px;
  max-height: calc(100vh - 4rem); overflow-y: auto;
  padding: 2rem 2rem 1.75rem; color: #30314F;
  font-family: 'FuturaPT', 'Futura', 'Century Gothic', 'DM Sans', sans-serif;
  transform: translateY(12px) scale(0.99); transition: transform 0.22s ease;
}
.am-overlay.open .am-modal { transform: none; }
.am-modal::-webkit-scrollbar { width: 5px; }
.am-modal::-webkit-scrollbar-thumb { background: rgba(48,49,79,0.2); border-radius: 4px; }

.am-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.5rem; gap: 1rem; }
.am-title { font-family: 'Romie', 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 28px; font-weight: 400; color: #30314F; margin: 0 0 4px; line-height: 1.1; }
.am-sub { font-size: 0.875rem; color: rgba(48,49,79,0.5); }
.am-close { background: rgba(48,49,79,0.08); border: none; border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: rgba(48,49,79,0.6); flex-shrink: 0; font-size: 15px; line-height: 1; margin-top: 2px; }
.am-close:hover { background: rgba(48,49,79,0.14); color: #30314F; }

.am-field { margin-bottom: 1.15rem; }
.am-label { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.09em; color: rgba(48,49,79,0.5); margin-bottom: 6px; font-weight: 500; }
.am-optional { font-size: 0.75rem; color: rgba(48,49,79,0.38); font-style: italic; margin-left: 7px; text-transform: none; letter-spacing: 0; }

.am-input { width: 100%; background: rgba(48,49,79,0.07); border: 1px solid rgba(48,49,79,0.18); border-radius: 8px; padding: 10px 13px; font-size: 1rem; color: #30314F; font-family: inherit; appearance: none; -webkit-appearance: none; }
.am-input:focus { outline: none; border-color: rgba(48,49,79,0.45); background: rgba(48,49,79,0.04); }
.am-input::placeholder { color: rgba(48,49,79,0.3); }
select.am-input { 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='%2330314F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; cursor: pointer; }
textarea.am-input { resize: none; min-height: 72px; line-height: 1.5; }

.am-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.am-row .am-field { margin-bottom: 1.15rem; }

.am-pills { display: flex; gap: 7px; flex-wrap: wrap; }
.am-pill { padding: 7px 15px; border-radius: 100px; border: 1px solid rgba(48,49,79,0.22); background: transparent; font-size: 0.8125rem; color: rgba(48,49,79,0.65); cursor: pointer; font-family: inherit; letter-spacing: 0.02em; transition: all 0.15s; }
.am-pill:hover { border-color: rgba(48,49,79,0.5); color: #30314F; }
.am-pill.active { background: #30314F; color: #F4EFE3; border-color: #30314F; }

.am-toggle-card { display: flex; align-items: center; justify-content: space-between; background: rgba(48,49,79,0.05); border: 1px solid rgba(48,49,79,0.12); border-radius: 8px; padding: 10px 13px; }
.am-toggle-text { font-size: 1rem; color: #30314F; line-height: 1.2; }
.am-toggle-hint { font-size: 0.75rem; color: rgba(48,49,79,0.45); margin-top: 2px; }
.am-toggle { width: 40px; height: 22px; background: rgba(48,49,79,0.2); border-radius: 100px; position: relative; cursor: pointer; flex-shrink: 0; transition: background 0.2s; border: none; }
.am-toggle.on { background: #B22452; }
.am-toggle::after { content: ''; position: absolute; width: 16px; height: 16px; background: #fff; border-radius: 50%; top: 3px; left: 3px; transition: transform 0.2s; }
.am-toggle.on::after { transform: translateX(18px); }

.am-footer { display: flex; justify-content: flex-end; gap: 9px; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(48,49,79,0.1); }
.am-cancel { padding: 10px 18px; background: transparent; border: 1px solid rgba(48,49,79,0.28); border-radius: 8px; color: rgba(48,49,79,0.7); font-size: 0.875rem; cursor: pointer; font-family: inherit; }
.am-cancel:hover { border-color: rgba(48,49,79,0.55); color: #30314F; }
.am-save { padding: 10px 22px; background: #30314F; border: 1px solid #30314F; border-radius: 8px; color: #F4EFE3; font-size: 0.875rem; cursor: pointer; font-family: inherit; letter-spacing: 0.03em; }
.am-save:hover { background: #252641; }