/* ============================================================================
 * Ventura shared Forms & Modals kit  (from Forms and Modals.html)
 * Restyles the app's existing .modal-* / field / chip / button classes onto the
 * design-system kit. PURE STYLING — no JS, no markup, no handler changes.
 * Deliberately does NOT set `display` on .modal-backdrop, so each page's own
 * show/hide (hidden attr / .is-open) keeps working untouched.
 * Linked after each page's inline <style> so it wins on equal specificity.
 * ========================================================================== */

/* ---- shell ---- */
.modal-backdrop { background: rgba(0,0,0,0.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); z-index: 80; align-items: flex-start; justify-content: center; padding: 48px 20px; overflow-y: auto; }
.modal { width: 100%; max-width: 540px; margin: 0 auto; background: var(--panel-strong, var(--panel)); border: 1px solid var(--line-strong, var(--line)); border-radius: 18px; box-shadow: 0 30px 80px rgba(0,0,0,0.5); overflow: hidden; animation: fk-pop .16s ease; }
.modal.modal-wide { max-width: 640px; }
@keyframes fk-pop { from { transform: translateY(8px) scale(.99); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-header { padding: 22px 26px 16px; border-bottom: 1px solid var(--line); position: relative; }
.modal-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-deep); }
.modal-title { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; color: var(--text-2, var(--text)); margin: 6px 0 0; }
.modal-subtitle { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.modal-close { position: absolute; top: 18px; right: 18px; width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--line); background: var(--card-2, var(--card)); color: var(--text); font-size: 17px; cursor: pointer; line-height: 1; }
.modal-close:hover { border-color: var(--line-strong, var(--line)); }
.modal-body { padding: 20px 26px; display: flex; flex-direction: column; gap: 16px; max-height: 64vh; overflow-y: auto; }
.modal-footer { padding: 16px 26px 22px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 10px; }

/* ---- field components (kit classes + existing aliases) ---- */
.f, .modal-field { display: flex; flex-direction: column; gap: 6px; }
.f-label, .modal-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.f-label .opt { color: var(--quiet, var(--muted)); text-transform: none; letter-spacing: 0; font-family: 'Inter', sans-serif; font-weight: 400; }
.f-input, .f-select, .f-textarea,
.modal-input, .modal-select, .modal-textarea { font-family: inherit; font-size: 14px; padding: 10px 12px; background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 10px; outline: none; transition: border-color .12s; width: 100%; }
.f-input:focus, .f-select:focus, .f-textarea:focus,
.modal-input:focus, .modal-select:focus, .modal-textarea:focus { border-color: var(--gold); }
.f-textarea, .modal-textarea { resize: vertical; min-height: 64px; }
.f-grid, .modal-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 520px) { .f-grid, .modal-grid-2 { grid-template-columns: 1fr; } }
.f-num { position: relative; display: flex; align-items: center; }
.f-num .suffix { position: absolute; right: 12px; font-size: 12px; color: var(--quiet, var(--muted)); font-family: 'JetBrains Mono', monospace; }
.f-section { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-deep); padding-top: 6px; border-top: 1px solid var(--line); }
.f-section.first { border-top: none; padding-top: 0; }
.f-hint { font-size: 11px; color: var(--quiet, var(--muted)); }

/* ---- chips (type pickers, e.g. Log touch) ---- */
.f-chips, .activity-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.f-chip, .activity-chip { font-family: inherit; font-size: 12.5px; font-weight: 600; padding: 8px 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--muted); cursor: pointer; }
.f-chip.on, .activity-chip.is-active, .activity-chip.selected { background: var(--text); color: var(--bg); border-color: var(--text); }

/* ---- checkbox row ---- */
.f-check, .modal-checkbox-row { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--muted); cursor: pointer; }

/* ---- file dropzone ---- */
.f-drop { border: 1px dashed var(--line-strong, var(--line)); border-radius: 10px; padding: 18px; text-align: center; font-size: 12.5px; color: var(--quiet, var(--muted)); }

/* ---- footer buttons (optional destructive + gold primary) ---- */
.modal-footer .btn, .modal-btn { font-family: inherit; font-size: 13px; font-weight: 600; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line-strong, var(--line)); background: var(--panel, var(--card)); color: var(--text); cursor: pointer; }
.modal-footer .btn:hover, .modal-btn:hover { border-color: var(--gold); }
.btn.primary, .modal-btn-save, .modal-btn.is-primary { background: linear-gradient(180deg, #F0C766, #D4AF37); color: #2A1E05; border-color: transparent; }
.btn.primary:hover, .modal-btn-save:hover { filter: brightness(1.03); }
.btn.danger, .modal-btn-delete { border-color: var(--bad); color: var(--bad); background: transparent; margin-right: auto; }
.btn.danger:hover, .modal-btn-delete:hover { background: var(--bad-soft, rgba(227,83,79,0.12)); }
.modal-error { font-size: 12.5px; color: var(--bad); }

/* Mobile (<=520px): tighten backdrop padding so the modal uses more of the
   viewport; the modal is already width:100% and modal-body scrolls internally. */
@media (max-width: 520px) {
  .modal-backdrop { padding: 16px 12px; }
}