/* ================================================================
   PROJECT MEMORY — theme-clean-modals.css
   All modal styles: pm-modal base shell, pm-modal-header,
   pm-modal-body, pm-modal-footer, pm-modal-picker-button,
   pm-button-close, and add-modal/reminder voice recording sections.
   Reminder form fields, help, voice settings, and dialog moved to
   theme-clean-reminder-modal.css.
   Depends on: theme-clean.css (tokens), theme-clean-forms.css
   ================================================================ */


/* ----------------------------------------------------------------
   MODAL BASE SHELL
   All modals share this structure:
   pm-modal > pm-modal-header + pm-modal-body + pm-modal-footer
   ---------------------------------------------------------------- */

/**
 * @pm-registry
 * @prefix pm
 * @description Full-screen overlay backdrop for all modals.
 *   Hidden by default. pm-active makes it visible.
 *   Clicking the backdrop closes the modal via JS.
 * @apps project-memory
 * @type        css-class
 * @name        pm-modal-overlay
 * @tags        TODO
 * @called-by   pm-lightbox.html, pm-modal-calendar-help.html, pm-modal-dialog.html, pm-modal-home-help.html, pm-modal-important-date-add.html, pm-modal-memory-detail.html, pm-modal-merge.html, pm-modal-note-add.html, pm-modal-note-append.html, pm-modal-note-attach.html, pm-modal-note-categories-help.html, pm-modal-note-categories.html, pm-modal-note-edit.html, pm-modal-note-email.html, pm-modal-notes-help.html, pm-modal-people-categories.html, pm-modal-people-help.html, pm-modal-person-edit.html, pm-modal-person-facts.html, pm-modal-place-categories.html, pm-modal-place-edit.html, pm-modal-place-facts.html, pm-modal-places-help.html, pm-modal-reminder-add.html, pm-modal-reminder-append.html, pm-modal-reminder-edit.html, pm-modal-reminders-help.html, pm-modal-search-help.html, pm-modal-voice-settings-help.html, pm-modal-voice-settings.html, pm-one-sheet.html
 * @depends-on  --pm-z-modal
 * @updated 2026-04-13
 */
.pm-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--pm-overlay-dark-mid);
    z-index: var(--pm-z-modal);
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.pm-modal-overlay.pm-active {
    display: flex;
}

/* Avatar upload modal must appear above profile and other modals */
#pm-avatar-modal {
    z-index: calc(var(--pm-z-critical) + 20);
}

/* Dialog must always appear above other modals */
#pm-modal-dialog-overlay,
#pm-modal-note-append-overlay,
#pm-modal-reminder-append-overlay,
#pm-modal-reminder-add-overlay,
#pm-modal-reminder-edit-overlay,
#pm-modal-reminders-help-overlay,
#pm-modal-voice-settings-overlay,
#pm-modal-voice-settings-help-overlay {
    z-index: var(--pm-z-critical);
}

/* Append-audio overlays must sit above the edit modal (same z-group, DOM order loses) */
#pm-modal-note-append-overlay,
#pm-modal-reminder-append-overlay {
    z-index: calc(var(--pm-z-critical) + 10);
}

@media (max-width: 520px) {
    .pm-modal-overlay {
        padding: 10px;
    }
}

@media (max-width: 420px) {
    .pm-modal {
        font-size: 0.9rem;
    }
    .pm-note-category-row {
        font-size: 0.8rem;
        padding: 6px 8px;
    }
}

/**
 * @pm-registry
 * @prefix pm
 * @description Modal card — centred dialog box.
 *   Max width 480px, scrollable body, fixed header and footer.
 * @apps project-memory
 * @type        css-class
 * @name        pm-modal
 * @tags        TODO
 * @called-by   pm-lightbox.html, pm-modal-calendar-help.html, pm-modal-dialog.html, pm-modal-home-help.html, pm-modal-important-date-add.html, pm-modal-memory-detail.html, pm-modal-memory-edit.html, pm-modal-memory-view.html, pm-modal-merge.html, pm-modal-note-add.html, pm-modal-note-append.html, pm-modal-note-attach.html, pm-modal-note-categories-help.html, pm-modal-note-categories.html, pm-modal-note-edit.html, pm-modal-note-email.html, pm-modal-notes-help.html, pm-modal-people-categories.html, pm-modal-people-help.html, pm-modal-person-edit.html, pm-modal-person-facts.html, pm-modal-place-categories.html, pm-modal-place-edit.html, pm-modal-place-facts.html, pm-modal-places-help.html, pm-modal-reminder-add.html, pm-modal-reminder-append.html, pm-modal-reminder-edit.html, pm-modal-reminders-help.html, pm-modal-search-help.html, pm-modal-voice-settings-help.html, pm-modal-voice-settings.html, pm-one-sheet.html, pm-panel-calendar.html
 * @depends-on  --pm-panel-surface, --pm-radius-large
 * @updated 2026-04-13
 */
.pm-modal {
    background: var(--pm-panel-surface);
    border-radius: var(--pm-radius-large);
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--pm-shadow-large);
    overflow: hidden;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-modal--wide
 * @tags        modals
 * @description Modifier class that increases a modal's max-width for complex or multi-column content.
 * @depends-on  pm-modal
 * @called-by  none found
 * @updated     2026-04-20
 */
.pm-modal--wide {
    max-width: 720px;
}

/**
 * @pm-registry
 * @prefix pm
 * @description Modal header — title left, close button right.
 *   Fixed at top, does not scroll with body.
 * @apps project-memory
 * @type        css-class
 * @name        pm-modal-header
 * @tags        TODO
 * @called-by   pm-modal-calendar-help.html, pm-modal-dialog.html, pm-modal-home-help.html, pm-modal-important-date-add.html, pm-modal-memory-view.html, pm-modal-merge.html, pm-modal-note-add.html, pm-modal-note-append.html, pm-modal-note-attach.html, pm-modal-note-categories-help.html, pm-modal-note-categories.html, pm-modal-note-edit.html, pm-modal-note-email.html, pm-modal-notes-help.html, pm-modal-people-categories.html, pm-modal-people-help.html, pm-modal-person-edit.html, pm-modal-person-facts.html, pm-modal-place-categories.html, pm-modal-place-edit.html, pm-modal-place-facts.html, pm-modal-places-help.html, pm-modal-reminder-add.html, pm-modal-reminder-append.html, pm-modal-reminder-edit.html, pm-modal-reminders-help.html, pm-modal-search-help.html, pm-modal-voice-settings-help.html, pm-modal-voice-settings.html, pm-one-sheet.html
 * @depends-on  --pm-border
 * @updated 2026-04-13
 */
.pm-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--pm-border);
    flex-shrink: 0;
}

/**
 * @pm-registry
 * @prefix pm
 * @description Scrollable content area inside a modal.
 * @apps project-memory
 * @type        css-class
 * @name        pm-modal-body
 * @tags        TODO
 * @called-by   pm-modal-calendar-help.html, pm-modal-dialog.html, pm-modal-home-help.html, pm-modal-important-date-add.html, pm-modal-merge.html, pm-modal-note-add.html, pm-modal-note-append.html, pm-modal-note-attach.html, pm-modal-note-categories-help.html, pm-modal-note-categories.html, pm-modal-note-edit.html, pm-modal-note-email.html, pm-modal-notes-help.html, pm-modal-people-categories.html, pm-modal-people-help.html, pm-modal-person-edit.html, pm-modal-person-facts.html, pm-modal-place-categories.html, pm-modal-place-edit.html, pm-modal-place-facts.html, pm-modal-places-help.html, pm-modal-reminder-add.html, pm-modal-reminder-append.html, pm-modal-reminder-edit.html, pm-modal-reminders-help.html, pm-modal-search-help.html, pm-modal-voice-settings-help.html, pm-modal-voice-settings.html
 * @depends-on  none
 * @updated 2026-04-13
 */
.pm-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/**
 * @pm-registry
 * @prefix pm
 * @description Modal footer — action buttons.
 *   Fixed at bottom, does not scroll with body.
 * @apps project-memory
 * @type        css-class
 * @name        pm-modal-footer
 * @tags        TODO
 * @called-by   pm-modal-dialog.html, pm-modal-important-date-add.html, pm-modal-merge.html, pm-modal-note-attach.html, pm-modal-note-categories.html, pm-modal-note-edit.html, pm-modal-note-email.html, pm-modal-people-categories.html, pm-modal-person-edit.html, pm-modal-person-facts.html, pm-modal-place-categories.html, pm-modal-place-edit.html, pm-modal-place-facts.html, pm-modal-reminder-edit.html, pm-modal-voice-settings.html
 * @depends-on  --pm-border
 * @updated 2026-04-13
 */
.pm-modal-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--pm-border);
    flex-shrink: 0;
}

/**
 * @pm-registry
 * @prefix pm
 * @description Groups multiple buttons on the right side of pm-modal-header.
 *   Use when a modal header has both a help (❓) and close (✕) button.
 * @apps project-memory
 * @type        css-class
 * @name        pm-modal-header-actions
 * @tags        TODO
 * @called-by   pm-modal-calendar-help.html, pm-modal-important-date-add.html, pm-modal-memory-view.html, pm-modal-merge.html, pm-modal-note-attach.html, pm-modal-note-categories.html, pm-modal-note-edit.html, pm-modal-note-email.html, pm-modal-people-categories.html, pm-modal-person-edit.html, pm-modal-person-facts.html, pm-modal-place-categories.html, pm-modal-place-edit.html, pm-modal-place-facts.html, pm-modal-reminder-edit.html, pm-modal-voice-settings.html, pm-one-sheet.html
 * @depends-on  none
 * @updated 2026-04-13
 */
.pm-modal-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/**
 * @pm-registry
 * @prefix pm
 * @description Close button inside pm-modal-header (✕).
 * @apps project-memory
 * @type        css-class
 * @name        pm-button-close
 * @tags        TODO
 * @called-by   pm-lightbox.html, pm-modal-dialog.html, pm-modal-home-help.html, pm-modal-important-date-add.html, pm-modal-memory-view.html, pm-modal-note-add.html, pm-modal-note-append.html, pm-modal-note-attach.html, pm-modal-note-categories-help.html, pm-modal-note-categories.html, pm-modal-note-edit.html, pm-modal-note-email.html, pm-modal-notes-help.html, pm-modal-people-categories.html, pm-modal-people-help.html, pm-modal-person-edit.html, pm-modal-person-facts.html, pm-modal-place-categories.html, pm-modal-place-edit.html, pm-modal-place-facts.html, pm-modal-places-help.html, pm-modal-reminder-add.html, pm-modal-reminder-append.html, pm-modal-reminder-edit.html, pm-modal-reminders-help.html, pm-modal-search-help.html, pm-modal-voice-settings-help.html, pm-modal-voice-settings.html, pm-one-sheet.html
 * @depends-on  --pm-radius-full, --pm-surface-2, --pm-text-2
 * @updated 2026-04-13
 */
.pm-button-close {
    width: 32px;
    height: 32px;
    border-radius: var(--pm-radius-full);
    background: var(--pm-surface-2);
    color: var(--pm-text-2);
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s;
}

.pm-button-close:active {
    background: var(--pm-border);
}

/**
 * @pm-registry
 * @prefix pm
 * @description Help button inside pm-modal-header (❓). Brand-coloured variant of pm-button-close.
 *   Always paired with pm-button-close inside pm-modal-header-actions.
 * @apps project-memory
 * @type        css-class
 * @name        pm-button-help
 * @tags        TODO
 * @called-by   pm-modal-note-categories.html, pm-modal-note-edit.html, pm-modal-note-email.html, pm-modal-reminder-edit.html, pm-modal-voice-settings.html, pm-one-sheet.html
 * @depends-on  --pm-radius-full, --pm-brand-light, --pm-brand-dark
 * @updated 2026-04-13
 */
.pm-button-help {
    width: 32px;
    height: 32px;
    border-radius: var(--pm-radius-full);
    background: var(--pm-brand-light);
    color: var(--pm-brand-dark);
    border: none;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s;
}

.pm-button-help:active {
    background: var(--pm-brand);
    color: white;
}


/* ----------------------------------------------------------------
   MODAL PICKER  (pm-modal-reminder-add and future pickers)
   Two large tap targets — used wherever a simple choice is needed.
   ---------------------------------------------------------------- */

/**
 * @pm-registry
 * @prefix pm
 * @description Large picker button used in add-type modals.
 *   Icon on the left, label on the right. Full width.
 *   Used in pm-modal-reminder-add — reusable for other pickers.
 * @apps project-memory
 * @type        css-class
 * @name        pm-modal-picker-button
 * @tags        TODO
 * @called-by   pm-modal-important-date-add.html, pm-modal-note-add.html, pm-modal-reminder-add.html
 * @depends-on  --pm-radius-medium, --pm-panel-surface, --pm-border, --pm-shadow-small
 * @updated 2026-04-13
 */
.pm-modal-picker-button {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 18px 20px;
    border-radius: var(--pm-radius-medium);
    background: var(--pm-panel-surface);
    border: 1.5px solid var(--pm-border);
    box-shadow: var(--pm-shadow-small);
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}

.pm-modal-picker-button:active {
    background: var(--pm-brand-light);
    transform: scale(0.98);
}

/**
 * @pm-registry
 * @prefix pm
 * @description Emoji icon inside pm-modal-picker-button.
 * @apps project-memory
 * @type        css-class
 * @name        pm-modal-picker-button-icon
 * @tags        TODO
 * @called-by   pm-modal-important-date-add.html, pm-modal-note-add.html, pm-modal-reminder-add.html
 * @depends-on  none
 * @updated 2026-04-13
 */
.pm-modal-picker-button-icon {
    font-size: 1.8rem;
    line-height: 1;
}

/**
 * @pm-registry
 * @prefix pm
 * @description Text label inside pm-modal-picker-button.
 * @apps project-memory
 * @type        css-class
 * @name        pm-modal-picker-button-label
 * @tags        TODO
 * @called-by   pm-modal-important-date-add.html, pm-modal-note-add.html, pm-modal-reminder-add.html
 * @depends-on  --pm-text-1
 * @updated 2026-04-13
 */
.pm-modal-picker-button-label {
    font-size: 1rem;
    font-weight: 700;
    color: var(--pm-text-1);
}


/* ----------------------------------------------------------------
   ADD MODAL — INLINE VOICE RECORDING VIEW
   ---------------------------------------------------------------- */

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-add-voice-view
 * @tags        modals
 * @description The container for the voice recording interface within 'Add' modals, shown when the user chooses to record rather than type.
 * @depends-on  none
 * @called-by  pm-modal-important-date-add.html, pm-modal-note-add.html, pm-modal-note-append.html, pm-modal-reminder-add.html, pm-modal-reminder-append.html
 * @updated     2026-04-15
 */
.pm-add-voice-view {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 24px 20px;
    text-align: center;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-add-record-timer
 * @tags        modals
 * @description The large timer display (e.g., 0:00) that shows the elapsed time during a voice recording in the 'Add' modals.
 * @depends-on  --pm-brand, pm-modal-reminder-add.html:38, pm-modal-note-add.html:39, audioService.js
 * @called-by  pm-modal-important-date-add.html, pm-modal-note-add.html, pm-modal-note-append.html, pm-modal-reminder-add.html, pm-modal-reminder-append.html
 * @updated     2026-04-14
 */
.pm-add-record-timer {
    font-size: 2rem;
    font-weight: 700;
    color: var(--pm-brand);
    letter-spacing: 2px;
    display: none;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-add-waveform
 * @tags        modals
 * @description The container for the animated waveform bars shown during voice recording in the 'Add' modals. Hidden by default.
 * @depends-on  pm-modal-reminder-add.html:39, pm-modal-note-add.html:40, audioService.js
 * @called-by  pm-modal-important-date-add.html, pm-modal-note-add.html, pm-modal-note-append.html, pm-modal-reminder-add.html, pm-modal-reminder-append.html
 * @updated     2026-04-14
 */
.pm-add-waveform {
    display: none;
    gap: 4px;
    align-items: flex-end;
    justify-content: center;
    height: 36px;
    width: 100%;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-add-wave-bar
 * @tags        modals
 * @description A single vertical bar in the animated waveform. Its height is animated by the `pm-wave` keyframes to create a bouncing effect.
 * @depends-on  --pm-brand, pm-modal-reminder-add.html:40, pm-modal-note-add.html:41
 * @called-by  pm-modal-important-date-add.html, pm-modal-note-add.html, pm-modal-note-append.html, pm-modal-reminder-add.html, pm-modal-reminder-append.html
 * @updated     2026-04-14
 */
.pm-add-wave-bar {
    width: 5px;
    background: var(--pm-brand);
    border-radius: var(--pm-radius-xsmall);
    animation: pm-wave-add 0.8s ease-in-out infinite alternate;
    height: 18px;
}

.pm-add-wave-bar:nth-child(1) { animation-delay: 0s;    height: 12px; }
.pm-add-wave-bar:nth-child(2) { animation-delay: 0.15s; height: 28px; }
.pm-add-wave-bar:nth-child(3) { animation-delay: 0.3s;  height: 36px; }
.pm-add-wave-bar:nth-child(4) { animation-delay: 0.15s; height: 28px; }
.pm-add-wave-bar:nth-child(5) { animation-delay: 0s;    height: 12px; }

@keyframes pm-wave-add {
    from { transform: scaleY(0.4); }
    to   { transform: scaleY(1.0); }
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-add-processing-message
 * @tags        modals
 * @description Styles the 'AI processing...' message shown in 'Add' modals after a voice recording is submitted. Hidden by default.
 * @depends-on  --pm-brand, pm-modal-reminder-add.html:50, pm-modal-note-add.html:51, audioService.js, reminderModalService.js
 * @called-by  pm-modal-important-date-add.html, pm-modal-note-add.html, pm-modal-note-append.html, pm-modal-reminder-add.html, pm-modal-reminder-append.html, pm-one-sheet.html
 * @updated     2026-04-14
 */
.pm-add-processing-message {
    display: none;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--pm-brand);
    text-align: center;
    padding: 8px 0;
}

/**
 * @pm-registry
 * @prefix pm
 * @type css-class
 * @name pm-profile-body
 * @description Centred layout container inside pm-modal-user-profile.
 * @apps project-memory
 * @tags modals profile
 * @updated 2026-05-06
 */
.pm-profile-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 24px 16px;
}

/**
 * @pm-registry
 * @prefix pm
 * @type css-class
 * @name pm-profile-avatar-large
 * @description Large avatar circle in pm-modal-user-profile showing the user's initial.
 * @apps project-memory
 * @tags modals profile
 * @updated 2026-05-06
 */
.pm-profile-avatar-large {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--pm-brand);
    color: white;
    font-size: 2rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/**
 * @pm-registry
 * @prefix pm
 * @type css-class
 * @name pm-profile-name
 * @description User's full name display in pm-modal-user-profile.
 * @apps project-memory
 * @tags modals profile
 * @updated 2026-05-06
 */
.pm-profile-name {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--pm-text-1);
}

/**
 * @pm-registry
 * @prefix pm
 * @type css-class
 * @name pm-profile-email
 * @description User's email display in pm-modal-user-profile.
 * @apps project-memory
 * @tags modals profile
 * @updated 2026-05-06
 */
.pm-profile-email {
    font-size: 0.9rem;
    color: var(--pm-text-2);
}

.pm-profile-section-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--pm-text-2);
    margin-bottom: 8px;
}

.pm-profile-read-row {
    display: flex;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid var(--pm-border);
    align-items: flex-start;
}

.pm-profile-read-row:last-child {
    border-bottom: none;
}

.pm-profile-read-label {
    font-size: 0.8rem;
    color: var(--pm-text-2);
    min-width: 90px;
    flex-shrink: 0;
    padding-top: 1px;
}

.pm-profile-contact-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    background: var(--pm-surface-2, var(--pm-surface));
    border-radius: var(--pm-radius-sm, 8px);
    margin-bottom: 6px;
}

.pm-profile-contact-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.pm-profile-contact-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--pm-text-1);
}

.pm-profile-contact-detail {
    font-size: 0.8rem;
    color: var(--pm-text-2);
}