/* ================================================================
   PROJECT MEMORY — theme-clean-modal-memory-edit.css
   All styles for the Memory Edit modal:
   - Legacy pm-memory-edit-* overlay styles
   - v2 pm-me-* static template components
   Depends on: theme-clean.css (tokens), theme-clean-forms.css
   ================================================================ */


/* ─── MEMORY EDIT OVERLAY ────────────────────────────────────── */
/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-memory-edit-overlay
 * @tags        modals
 * @description Fixed semi-transparent background overlay that contains the memory edit modal.
 * @depends-on  --pm-z-modal
 * @called-by  pm-modal-memory-edit.html
 * @updated     2026-04-20
 */
.pm-memory-edit-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--pm-z-modal);
    background: var(--pm-panel-surface);
}

.pm-memory-edit-overlay.pm-active {
    display: block;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-memory-edit-container
 * @tags        modals
 * @description Layout utility using display: contents to allow modal children to interact with the overlay flex container.
 * @depends-on  pm-memory-edit-overlay
 * @called-by  none found
 * @updated     2026-04-20
 */
.pm-memory-edit-container {
    display: contents;
}


/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-memory-edit-header
 * @tags        modals
 * @description Sticky header for the memory edit modal containing title and primary actions.
 * @depends-on  --pm-panel-surface, --pm-border
 * @called-by  none found
 * @updated     2026-04-20
 */
.pm-memory-edit-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: var(--pm-panel-surface);
    border-bottom: 1px solid var(--pm-border);
    position: sticky;
    top: 0;
    z-index: 10;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-memory-edit-title
 * @tags        modals
 * @description Bold primary title text within the memory edit modal header.
 * @depends-on  pm-memory-edit-header, --pm-text-1
 * @called-by  none found
 * @updated     2026-04-20
 */
.pm-memory-edit-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--pm-text-1);
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-memory-edit-more-toggle
 * @tags        modals
 * @description Interactive toggle button for revealing additional fields in the memory edit modal.
 * @depends-on  --pm-brand, --pm-radius-small, --pm-surface-2
 * @called-by  none found
 * @updated     2026-04-20
 */
.pm-memory-edit-more-toggle {
    text-align: center;
    padding: 12px;
    margin: 4px 0 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--pm-brand);
    cursor: pointer;
    user-select: none;
    border-radius: var(--pm-radius-small);
    background: var(--pm-surface-2);
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-memory-edit-save-btn
 * @tags        modals
 * @description Primary action button with brand gradient for saving memory edits.
 * @depends-on  --pm-home-gradient-start, --pm-home-gradient-end, --pm-radius-full
 * @called-by  none found
 * @updated     2026-04-20
 */
.pm-memory-edit-save-btn {
    background: linear-gradient(135deg, var(--pm-home-gradient-start), var(--pm-home-gradient-end));
    color: white;
    border: none;
    border-radius: var(--pm-radius-full);
    padding: 8px 20px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-memory-edit-fields
 * @tags        modals
 * @description Flex container for all input field rows within the memory edit modal.
 * @depends-on  pm-memory-edit-container
 * @called-by  none found
 * @updated     2026-04-20
 */
.pm-memory-edit-fields {
    padding: 10px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-memory-edit-field
 * @tags        modals
 * @description Individual form field wrapper that vertically aligns a label and its input.
 * @depends-on  pm-memory-edit-fields
 * @called-by  none found
 * @updated     2026-04-20
 */
.pm-memory-edit-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-memory-edit-label
 * @tags        modals
 * @description Uppercased bold text label for memory edit form fields.
 * @depends-on  pm-memory-edit-field
 * @called-by  none found
 * @updated     2026-04-20
 */
.pm-memory-edit-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--pm-text-3);
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-memory-edit-input
 * @tags        modals
 * @description Standard text input styling for the memory edit modal, including focus states.
 * @depends-on  --pm-border, --pm-radius-small, --pm-surface-2, --pm-text-1, --pm-brand
 * @called-by  none found
 * @updated     2026-04-20
 */
.pm-memory-edit-input, .pm-memory-edit-textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--pm-border);
    border-radius: var(--pm-radius-small);
    background: var(--pm-surface-2);
    color: var(--pm-text-1);
    font-size: 0.95rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s;
}

.pm-memory-edit-input:focus, .pm-memory-edit-textarea:focus {
    border-color: var(--pm-brand);
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-memory-edit-textarea
 * @tags        modals
 * @description Auto-expanding multiline text input for memory notes, with no-resize constraint and custom line-height.
 * @depends-on  pm-memory-edit-input
 * @called-by  none found
 * @updated     2026-04-20
 */
.pm-memory-edit-textarea {
    min-height: 60px;
    resize: none;
    line-height: 1.5;
    overflow: hidden;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-memory-edit-input-row
 * @tags        modals
 * @description Flex container that aligns a standard input field with a side action button (like a pin toggle).
 * @depends-on  pm-memory-edit-input
 * @called-by  none found
 * @updated     2026-04-20
 */
.pm-memory-edit-input-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.pm-memory-edit-input-row .pm-memory-edit-input {
    flex: 1;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-memory-edit-pin-btn
 * @tags        modals
 * @description Square toggle button in the memory edit modal header for pinning/unpinning the memory.
 * @depends-on  --pm-border, --pm-radius-small, --pm-panel-surface
 * @called-by  none found
 * @updated     2026-04-20
 */
.pm-memory-edit-pin-btn {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border: 1.5px solid var(--pm-border);
    border-radius: var(--pm-radius-small);
    background: var(--pm-panel-surface);
    font-size: 1.3rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.pm-memory-edit-pin-btn:active {
    background: var(--pm-brand-light);
    border-color: var(--pm-brand);
}

/* ==========================================================================
   MEMORY EDIT MODAL v2 — static template components (pm-me-*)
   ========================================================================== */

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-me-container
 * @tags        modals, memory-edit
 * @description Full-height flex column container inside the memory edit overlay.
 * @called-by  pm-modal-memory-edit.html
 * @depends-on --pm-panel-surface
 * @updated     2026-04-26
 */
.pm-me-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--pm-panel-surface);
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-me-header
 * @tags        modals, memory-edit
 * @description Sticky three-column header: close button, title, save button.
 * @called-by  pm-modal-memory-edit.html
 * @depends-on --pm-panel-surface, --pm-border
 * @updated     2026-04-26
 */
.pm-me-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(12px + var(--pm-safe-top)) 16px 12px;
    background: var(--pm-panel-surface);
    border-bottom: 1px solid var(--pm-border);
    position: sticky;
    top: 0;
    z-index: 10;
    flex-shrink: 0;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-me-close-btn
 * @tags        modals
 * @description Styles a text-based close button for the memory edit modal, featuring a large font, specific color, and pointer cursor.
 * @called-by  pm-modal-memory-edit.html
 * @depends-on --pm-text-2, --pm-radius-small
 * @updated     2026-05-03
 */
.pm-me-close-btn {
    background: none;
    border: none;
    font-size: 1.4rem;
    color: var(--pm-text-2);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--pm-radius-small);
    line-height: 1;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-me-title
 * @tags        modals
 * @description Styles the title text within the memory edit modal, setting its font size, weight, and color.
 * @called-by  pm-modal-memory-edit.html
 * @depends-on --pm-text-1
 * @updated     2026-05-03
 */
.pm-me-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--pm-text-1);
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-me-save-btn
 * @tags        modals
 * @description Styles a save button for the memory edit modal with a gradient background, white text, and rounded corners.
 * @called-by  pm-modal-memory-edit.html
 * @depends-on --pm-home-gradient-start, --pm-home-gradient-end, --pm-radius-full
 * @updated     2026-05-03
 */
.pm-me-save-btn {
    background: linear-gradient(135deg, var(--pm-home-gradient-start), var(--pm-home-gradient-end));
    color: white;
    border: none;
    border-radius: var(--pm-radius-full);
    padding: 8px 20px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-me-body
 * @tags        modals, memory-edit
 * @description Scrollable body area below the sticky header.
 * @called-by  pm-modal-memory-edit.html
 * @depends-on none
 * @updated     2026-04-26
 */
.pm-me-body {
    flex: 1;
    overflow-y: auto;
    padding: 0 0 40px;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-me-media-strip
 * @tags        modals, memory-edit
 * @description Horizontal scrolling row of asset thumbnails — display only, no add button.
 * @called-by  pm-modal-memory-edit.html
 * @depends-on --pm-border
 * @updated     2026-04-26
 */
.pm-me-media-strip {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 12px 16px;
    border-bottom: 1px solid var(--pm-border);
    scrollbar-width: none;
}

.pm-me-media-strip::-webkit-scrollbar { display: none; }

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-me-media-thumb
 * @tags        modals
 * @description Styles a 72x72px clickable media thumbnail for the memory edit modal, displaying content with rounded corners.
 * @called-by  none found
 * @depends-on --pm-radius-small, --pm-surface-2
 * @updated     2026-05-03
 */
.pm-me-media-thumb {
    position: relative;
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    border-radius: var(--pm-radius-small);
    overflow: visible;
    background: var(--pm-surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.pm-me-media-thumb img,
.pm-me-media-thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--pm-radius-small);
    pointer-events: none;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-me-media-icon
 * @tags        modals
 * @description Sets the font size for a media icon displayed within a media thumbnail in the memory edit modal.
 * @called-by  none found
 * @depends-on none
 * @updated     2026-05-03
 */
.pm-me-media-icon {
    font-size: 1.8rem;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-me-media-delete
 * @tags        modals, memory-edit
 * @description Small × delete button overlaid on top-right corner of each media thumbnail.
 * @called-by  none found
 * @depends-on none
 * @updated     2026-04-27
 */
.pm-me-media-delete {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--pm-danger, var(--pm-danger));
    color: var(--pm-panel-surface);
    border: none;
    font-size: 0.65rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    padding: 0;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-me-media-add-btn
 * @tags        modals, memory-edit
 * @description Dashed "+ Add" button at the end of the Edit Memory media strip.
 * @called-by  none found
 * @depends-on --pm-radius-small, --pm-border
 * @updated     2026-04-27
 */
.pm-me-media-add-btn {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    border-radius: var(--pm-radius-small);
    border: 2px dashed var(--pm-border);
    background: none;
    color: var(--text-2);
    font-size: 0.8rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pm-me-media-add-btn:hover {
    border-color: var(--pm-accent);
    color: var(--pm-accent);
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-me-fields
 * @tags        modals, memory-edit
 * @description Stacked field rows container.
 * @called-by  pm-modal-memory-edit.html
 * @depends-on none
 * @updated     2026-04-26
 */
.pm-me-fields {
    padding: 8px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-me-field
 * @tags        modals
 * @description Styles a single field in the memory edit modal, arranging contents vertically with padding and a bottom border.
 * @called-by  pm-modal-memory-edit.html
 * @depends-on --pm-border
 * @updated     2026-05-03
 */
.pm-me-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 0;
    border-bottom: 1px solid var(--pm-border);
}

.pm-me-field:last-child {
    border-bottom: none;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-me-label
 * @tags        modals
 * @description Styles a label in the memory edit modal with a small, bold, uppercase, and slightly spaced text appearance.
 * @called-by  pm-modal-memory-edit.html
 * @depends-on --pm-text-2
 * @updated     2026-05-03
 */
.pm-me-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--pm-text-2);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-me-input
 * @tags        modals
 * @description Styles text input fields in the memory edit modal with a distinct background, border, text color, padding, and full width.
 * @called-by  pm-modal-memory-edit.html
 * @depends-on --pm-surface-2, --pm-border, --pm-radius-small, --pm-text-1
 * @updated     2026-05-03
 */
.pm-me-input,
/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-me-textarea
 * @tags        modals
 * @description Styles a textarea input field in the memory edit modal, preventing manual resizing and ensuring consistent line height.
 * @called-by  pm-modal-memory-edit.html
 * @depends-on --pm-surface-2, --pm-border, --pm-radius-small, --pm-text-1
 * @updated     2026-05-03
 */
.pm-me-textarea {
    background: var(--pm-surface-2);
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius-small);
    color: var(--pm-text-1);
    font-size: 0.95rem;
    padding: 10px 12px;
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
}

.pm-me-input:focus,
.pm-me-textarea:focus {
    outline: none;
    border-color: var(--pm-brand);
}

.pm-me-textarea {
    field-sizing: content;
    resize: none;
    line-height: 1.5;
    overflow: hidden;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-me-textarea--large
 * @tags        modals
 * @description Sets a minimum height for a textarea in the memory edit modal, making it appear larger.
 * @called-by  pm-modal-memory-edit.html
 * @depends-on none
 * @updated     2026-05-03
 */
.pm-me-textarea--large {
    min-height: 100px;
}

.pm-me-textarea[readonly] {
    color: var(--pm-text-2);
    cursor: default;
    resize: none;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-me-readonly
 * @tags        modals
 * @description Styles read-only text elements within the memory edit modal, applying a smaller font size, muted color, and vertical padding.
 * @called-by  pm-modal-memory-edit.html
 * @depends-on --pm-text-2
 * @updated     2026-05-03
 */
.pm-me-readonly {
    font-size: 0.9rem;
    color: var(--pm-text-2);
    padding: 4px 0;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-me-chain
 * @tags        modals, memory-edit
 * @description Horizontal Memory Chain provenance display in the Edit Memory modal.
 * @called-by  pm-modal-memory-edit.html
 * @depends-on --pm-text-2
 * @updated     2026-04-27
 */
.pm-me-chain {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.82rem;
    color: var(--pm-text-2);
    padding: 6px 0;
    line-height: 1.5;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-me-chain-link
 * @tags        modals
 * @description Formats a link in the memory chain display to allow normal text wrapping and styles strong tags within it.
 * @called-by  none found
 * @depends-on none
 * @updated     2026-05-03
 */
.pm-me-chain-link {
    white-space: normal;
}

.pm-me-chain-link strong {
    color: var(--pm-text);
    font-weight: 600;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-me-chain-meta
 * @tags        modals
 * @description Styles metadata text within the memory chain display using a muted secondary color.
 * @called-by  none found
 * @depends-on --pm-text-2
 * @updated     2026-05-03
 */
.pm-me-chain-meta {
    color: var(--pm-text-2);
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-me-chain-arrow
 * @tags        modals
 * @description Styles an arrow icon within the memory chain display, indicating progression with a muted color and light font weight.
 * @called-by  none found
 * @depends-on --pm-border
 * @updated     2026-05-03
 */
.pm-me-chain-arrow {
    color: var(--pm-border);
    font-weight: 300;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-me-chain-loading
 * @tags        modals
 * @description Styles a loading message within the memory chain display, showing it in a muted, italic font.
 * @called-by  pm-modal-memory-edit.html
 * @depends-on --pm-text-2
 * @updated     2026-05-03
 */
.pm-me-chain-loading {
    color: var(--pm-text-2);
    font-style: italic;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-me-chip-row
 * @tags        modals, memory-edit
 * @description Wrapping flex container for speaker chips and the add-chip input.
 * @called-by  pm-modal-memory-edit.html
 * @depends-on none
 * @updated     2026-04-26
 */
.pm-me-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    padding: 6px 0;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-me-chip
 * @tags        modals
 * @description Styles a small, pill-shaped chip for displaying tags or selected items in the memory edit modal.
 * @called-by  pm-modal-memory-edit.html
 * @depends-on --pm-brand, --pm-radius-full
 * @updated     2026-05-03
 */
.pm-me-chip {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--pm-brand-light, var(--pm-overlay-white-faint));
    border: 1px solid var(--pm-brand);
    border-radius: var(--pm-radius-full);
    padding: 4px 10px;
    font-size: 0.85rem;
    color: var(--pm-brand);
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-me-chip-remove
 * @tags        modals
 * @description Styles a small, text-based remove button for chips in the memory edit modal, using the brand color.
 * @called-by  none found
 * @depends-on --pm-brand
 * @updated     2026-05-03
 */
.pm-me-chip-remove {
    background: none;
    border: none;
    color: var(--pm-brand);
    font-size: 1rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    display: flex;
    align-items: center;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-me-chip-input
 * @tags        modals
 * @description Styles an input field for adding new chips in the memory edit modal, featuring a dashed bottom border and specific text styling.
 * @called-by  pm-modal-memory-edit.html
 * @depends-on --pm-border, --pm-text-1
 * @updated     2026-05-03
 */
.pm-me-chip-input {
    background: none;
    border: none;
    border-bottom: 1px dashed var(--pm-border);
    color: var(--pm-text-1);
    font-size: 0.9rem;
    padding: 4px 4px;
    outline: none;
    min-width: 120px;
    font-family: inherit;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-me-reminders-list
 * @tags        modals, memory-edit
 * @description Container for reminder bridge items linked to this memory.
 * @called-by  pm-modal-memory-edit.html
 * @depends-on --pm-text-1
 * @updated     2026-04-26
 */
.pm-me-reminders-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.9rem;
    color: var(--pm-text-1);
    padding: 4px 0;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-me-reminder-item
 * @tags        modals
 * @description Styles an individual reminder item in the memory edit modal with padding, a distinct background, and rounded corners.
 * @called-by  none found
 * @depends-on --pm-surface-2, --pm-radius-small
 * @updated     2026-05-03
 */
.pm-me-reminder-item {
    padding: 6px 8px;
    background: var(--pm-surface-2);
    border-radius: var(--pm-radius-small);
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-me-reminders-empty
 * @tags        modals
 * @description Styles a message indicating an empty reminder list in the memory edit modal, using a muted, italic font.
 * @called-by  none found
 * @depends-on --pm-text-2
 * @updated     2026-05-03
 */
.pm-me-reminders-empty {
    color: var(--pm-text-2);
    font-style: italic;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-me-reminder-add-btn
 * @tags        modals
 * @description Styles a button for adding new reminders in the memory edit modal, featuring a dashed border and brand color.
 * @called-by  pm-modal-memory-edit.html
 * @depends-on --pm-border, --pm-radius-small, --pm-brand
 * @updated     2026-05-03
 */
.pm-me-reminder-add-btn {
    margin-top: 8px;
    background: none;
    border: 1px dashed var(--pm-border);
    border-radius: var(--pm-radius-small);
    color: var(--pm-brand);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 8px 14px;
    cursor: pointer;
    align-self: flex-start;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-me-advanced-toggle
 * @tags        modals, memory-edit
 * @description Full-width button that reveals/hides the advanced drawer.
 * @called-by  pm-modal-memory-edit.html
 * @depends-on --pm-surface-2, --pm-border, --pm-brand
 * @updated     2026-04-26
 */
.pm-me-advanced-toggle {
    width: 100%;
    background: var(--pm-surface-2);
    border: none;
    border-top: 1px solid var(--pm-border);
    border-bottom: 1px solid var(--pm-border);
    color: var(--pm-brand);
    font-size: 0.9rem;
    font-weight: 600;
    padding: 12px 16px;
    text-align: center;
    cursor: pointer;
    letter-spacing: 0.02em;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-me-advanced-drawer
 * @tags        modals, memory-edit
 * @description Collapsible section containing advanced read-only and editable fields.
 *   Shown/hidden via pm-hidden toggle — no DOM destruction.
 * @called-by  pm-modal-memory-edit.html
 * @depends-on --pm-surface-2
 * @updated     2026-04-26
 */
.pm-me-advanced-drawer {
    background: var(--pm-surface-2);
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-me-reanalyze-row
 * @tags        modals
 * @description Styles a row containing the reanalyze button in the memory edit modal, applying padding, a top border, and center alignment.
 * @called-by  pm-modal-memory-edit.html
 * @depends-on --pm-border
 * @updated     2026-05-03
 */
.pm-me-reanalyze-row {
    padding: 16px;
    border-top: 1px solid var(--pm-border);
    display: flex;
    justify-content: center;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-me-reanalyze-btn
 * @tags        modals
 * @description Styles a button to reanalyze a memory in the edit modal, featuring a bordered appearance and interactive brand-colored states.
 * @called-by  pm-modal-memory-edit.html
 * @depends-on --pm-border, --pm-radius-full, --pm-text-2
 * @updated     2026-05-03
 */
.pm-me-reanalyze-btn {
    background: none;
    border: 1.5px solid var(--pm-border);
    border-radius: var(--pm-radius-full);
    color: var(--pm-text-2);
    font-size: 0.9rem;
    font-weight: 600;
    padding: 10px 24px;
    cursor: pointer;
    letter-spacing: 0.02em;
    transition: border-color 0.15s, color 0.15s;
}

.pm-me-reanalyze-btn:active {
    border-color: var(--pm-brand);
    color: var(--pm-brand);
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-me-push-facts-btn
 * @tags        modals, memory-edit, people
 * @description Push Facts to Profiles button in the Edit Memory advanced drawer.
 * @called-by  pm-modal-memory-edit.html
 * @depends-on --pm-border, --pm-radius-small, --pm-brand
 * @updated     2026-04-27
 */
.pm-me-push-facts-btn {
    margin-top: 8px;
    background: none;
    border: 1px dashed var(--pm-border);
    border-radius: var(--pm-radius-small);
    color: var(--pm-brand);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 8px 14px;
    cursor: pointer;
    align-self: flex-start;
}
.pm-me-push-facts-btn:disabled {
    opacity: 0.5;
    cursor: default;
}
/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-me-save-place-btn
 * @tags        modals, memory-edit, places
 * @description Save as Place button under Memri's Detected Location in the Edit Memory advanced drawer. Hidden when memory has no GPS data.
 * @called-by  none found
 * @depends-on --pm-border, --pm-radius-small, --pm-brand
 * @updated     2026-05-05
 */
.pm-me-save-place-btn {
    margin-top: 8px;
    background: none;
    border: 1px dashed var(--pm-border);
    border-radius: var(--pm-radius-small);
    color: var(--pm-brand);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 8px 14px;
    cursor: pointer;
    align-self: flex-start;
}
/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-me-label-row
 * @tags        modals, memory-edit
 * @description Flex row wrapping a field label and its inline icon buttons (e.g. map toggle).
 * @called-by  none found
 * @depends-on none
 * @updated     2026-05-05
 */
.pm-me-label-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.pm-me-label-row .pm-me-label { margin-bottom: 0; }
/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-me-location-actions
 * @tags        modals, memory-edit, places
 * @description Flex row of location action buttons (View Map, Save as Place) shown below "Where it happened" when GPS data exists.
 * @called-by  pm-modal-memory-edit.html
 * @depends-on none
 * @updated     2026-05-05
 */
.pm-me-location-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}
/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-me-loc-btn
 * @tags        modals, memory-edit, places
 * @description Pill-style action button for location actions (View Map, Save as Place) in the Edit Memory modal.
 * @called-by  pm-modal-memory-edit.html
 * @depends-on --pm-border, --pm-text-2
 * @updated     2026-05-05
 */
.pm-me-loc-btn {
    background: none;
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius-medium);
    color: var(--pm-text-2);
    font-size: 0.82rem;
    padding: 5px 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: border-color 0.15s, color 0.15s;
}
.pm-me-loc-btn:hover {
    border-color: var(--pm-brand);
    color: var(--pm-brand);
}
/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-me-loc-btn--active
 * @tags        modals, memory-edit, places
 * @description Active/selected state for pm-me-loc-btn. Applied to View Map button when map is open.
 * @called-by  none found
 * @depends-on --pm-brand
 * @updated     2026-05-05
 */
.pm-me-loc-btn--active {
    border-color: var(--pm-brand);
    color: var(--pm-brand);
    background: rgba(var(--pm-brand-rgb, 74,144,226), 0.08);
}
/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-me-map-container
 * @tags        modals, memory-edit, places
 * @description Collapsible Leaflet map container in the Edit Memory main body. Shown when user taps View Map and memory has GPS data.
 * @called-by  pm-modal-memory-edit.html
 * @depends-on --pm-radius-small, --pm-border
 * @updated     2026-05-05
 */
.pm-me-map-container {
    width: 100%;
    height: 220px;
    border-radius: var(--pm-radius-small);
    margin-top: 10px;
    overflow: hidden;
    border: 1px solid var(--pm-border);
}
/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-me-push-facts-result
 * @tags        modals
 * @description Styles the feedback message after pushing facts to profiles in the memory edit modal, using a small, muted font.
 * @called-by  pm-modal-memory-edit.html
 * @depends-on --pm-text-2
 * @updated     2026-05-03
 */
.pm-me-push-facts-result {
    margin-top: 6px;
    font-size: 0.8rem;
    color: var(--pm-text-2);
}