/* ================================================================
   PROJECT MEMORY — theme-clean-sheets.css
   Bottom sheets: pm-sheet-capture, pm-sheet-upload, pm-sheet-about
   and shared sheet structure (handle, header, body, actions).
   Depends on: theme-clean.css (tokens)
   ================================================================ */

/**
 * @pm-registry
 * @prefix pm
 * @description Full-screen overlay backdrop for the One Sheet capture.
 *   Hidden by default. pm-active makes it visible.
 * @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-18
 */
.pm-modal-overlay#pm-one-sheet {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--pm-overlay-dark-mid);
    backdrop-filter: blur(4px);
    z-index: var(--pm-z-sheet);
    align-items: flex-end; /* Sheet slides from bottom */
    justify-content: center;
}

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

/* Modals opened from within a sheet need an opaque backdrop to cover the sheet */
#pm-modal-capture-help-overlay {
    background: rgba(0, 0, 0, 0.85);
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-sheet
 * @tags        themes
 * @description Animated container for bottom sheets, featuring a rounded top and safe-area padding.
 * @depends-on  --pm-panel-surface, --pm-radius-large, --pm-column-min, --pm-safe-bottom
 * @called-by  pm-one-sheet.html
 * @updated     2026-04-20
 */
.pm-sheet {
    background: var(--pm-panel-surface);
    border-radius: var(--pm-radius-large) var(--pm-radius-large) 0 0;
    width: 100%;
    max-width: var(--pm-column-min);
    max-height: 90dvh;
    overflow-y: auto;
    padding-bottom: calc(16px + var(--pm-safe-bottom));
    animation: pmSheetUp 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow: var(--pm-shadow-sheet);
    display: flex;
    flex-direction: column;
}

@keyframes pmSheetUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-sheet-handle
 * @tags        themes
 * @description Small horizontal bar at the top of a bottom sheet, indicating it can be dragged or swiped.
 * @depends-on  --pm-radius-full, --pm-border
 * @called-by  pm-one-sheet.html
 * @updated     2026-04-20
 */
.pm-sheet-handle {
    width: 36px;
    height: 4px;
    border-radius: var(--pm-radius-full);
    background: var(--pm-border);
    margin: 12px auto 8px;
    flex-shrink: 0;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-sheet-header
 * @tags        themes
 * @description Flex container for the sheet title and close action, with a bottom border separator.
 * @depends-on  --pm-border
 * @called-by  pm-one-sheet.html
 * @updated     2026-04-20
 */
.pm-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px 12px;
    border-bottom: 1px solid var(--pm-border);
    flex-shrink: 0;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-sheet-title
 * @tags        themes
 * @description Bold, primary title text for a bottom sheet.
 * @depends-on  --pm-text-1
 * @called-by  pm-one-sheet.html
 * @updated     2026-04-20
 */
.pm-sheet-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--pm-text-1);
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-sheet-body
 * @tags        themes
 * @description Main scrolling content area of a bottom sheet with standard interior padding.
 * @depends-on  pm-sheet
 * @called-by  pm-one-sheet.html
 * @updated     2026-04-20
 */
.pm-sheet-body {
    padding: 16px 20px;
    flex-grow: 1;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-sheet-actions
 * @tags        themes
 * @description Fixed action button container at the bottom of a sheet with a top border separator.
 * @depends-on  pm-sheet, --pm-border
 * @called-by  none found
 * @updated     2026-04-20
 */
.pm-sheet-actions {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid var(--pm-border);
    flex-shrink: 0;
}

/* Modifier for capture-specific sheets */
/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-sheet-capture
 * @tags        themes
 * @description Modifier class setting a minimum height for the One Sheet capture interface.
 * @depends-on  pm-sheet
 * @called-by  pm-one-sheet.html
 * @updated     2026-04-20
 */
.pm-sheet-capture {
    min-height: 400px;
    background: var(--pm-surface-2);
}

/* ─── MEMORY DETAIL OVERLAY ──────────────────────────────────── */
/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-memory-detail-overlay
 * @tags        themes
 * @description Full-screen semi-transparent backdrop for the memory detail view, using modal z-index.
 * @depends-on  --pm-z-modal
 * @called-by  pm-modal-memory-detail.html
 * @updated     2026-04-20
 */
.pm-memory-detail-overlay {
    background: var(--pm-overlay-dark-mid);
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--pm-z-modal);
    overflow-y: auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.pm-memory-detail-overlay.pm-active {
    display: flex;
}

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


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

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-memory-detail-title
 * @tags        themes
 * @description Bold primary title text in the memory detail header, featuring single-line ellipsis truncation.
 * @depends-on  pm-memory-detail-header, --pm-text-1
 * @called-by  none found
 * @updated     2026-04-20
 */
.pm-memory-detail-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--pm-text-1);
    flex: 1;
    margin-right: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-memory-detail-close
 * @tags        themes
 * @description Circular close icon button positioned in the memory detail header.
 * @depends-on  pm-memory-detail-header, --pm-surface-2, --pm-text-2
 * @called-by  none found
 * @updated     2026-04-20
 */
.pm-memory-detail-close {
    width: 36px;
    height: 36px;
    border: none;
    background: var(--pm-surface-2);
    border-radius: 50%;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pm-text-2);
    flex-shrink: 0;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-memory-detail-date
 * @tags        themes
 * @description Secondary text display for the memory timestamp within the detail modal.
 * @depends-on  --pm-text-3
 * @called-by  none found
 * @updated     2026-04-20
 */
.pm-memory-detail-date {
    padding: 8px 20px 0;
    font-size: 0.78rem;
    color: var(--pm-text-3);
    font-weight: 500;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-memory-detail-media-wrap
 * @tags        themes
 * @description Container wrapper for images, videos, or documents within the memory detail view.
 * @depends-on  --pm-surface-2, --pm-radius-medium
 * @called-by  none found
 * @updated     2026-04-20
 */
.pm-memory-detail-media-wrap {
    margin: 14px 20px;
    background: var(--pm-surface-2);
    border-radius: var(--pm-radius-medium);
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    flex-shrink: 0;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-memory-detail-media-img
 * @tags        themes
 * @description Full-width responsive image display within the memory detail view, restricted to 50vh.
 * @depends-on  pm-memory-detail-media-wrap
 * @called-by  none found
 * @updated     2026-04-20
 */
.pm-memory-detail-media-img, 
/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-memory-detail-media-video
 * @tags        themes
 * @description Full-width responsive video player within the memory detail view, restricted to 50vh.
 * @depends-on  pm-memory-detail-media-wrap
 * @called-by  none found
 * @updated     2026-04-20
 */
.pm-memory-detail-media-video {
    width: 100%;
    height: auto;
    max-height: 50vh;
    object-fit: contain;
    display: block;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-memory-detail-audio-player
 * @tags        themes
 * @description Layout container for the audio playback interface within the memory detail modal.
 * @depends-on  pm-memory-detail-media-wrap
 * @called-by  none found
 * @updated     2026-04-20
 */
.pm-memory-detail-audio-player {
    width: 100%;
    padding: 16px 14px 12px;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-memory-detail-visualiser
 * @tags        themes
 * @description Dark container for the audio waveform visualization, featuring small rounded corners.
 * @depends-on  pm-memory-detail-audio-player, --pm-radius-small
 * @called-by  none found
 * @updated     2026-04-20
 */
.pm-memory-detail-visualiser {
    width: 100%;
    height: 80px;
    border-radius: var(--pm-radius-small);
    background: var(--pm-dark-bg);
    display: block;
    margin-bottom: 10px;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-memory-detail-audio-controls
 * @tags        themes
 * @description Flex container aligning the audio playback buttons and progress seeker in the detail modal.
 * @depends-on  pm-memory-detail-audio-player
 * @called-by  none found
 * @updated     2026-04-20
 */
.pm-memory-detail-audio-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 6px;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-memory-detail-play-btn
 * @tags        themes
 * @description Circular play button with brand gradient background for audio memories in the detail modal.
 * @depends-on  pm-memory-detail-audio-controls, --pm-home-gradient-start, --pm-home-gradient-end
 * @called-by  none found
 * @updated     2026-04-20
 */
.pm-memory-detail-play-btn, 
/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-memory-detail-stop-btn
 * @tags        themes
 * @description Circular stop/pause button with secondary background for audio memories in the detail modal.
 * @depends-on  pm-memory-detail-audio-controls, --pm-surface-2, --pm-text-2
 * @called-by  none found
 * @updated     2026-04-20
 */
.pm-memory-detail-stop-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.pm-memory-detail-play-btn {
    background: linear-gradient(135deg, var(--pm-home-gradient-start), var(--pm-home-gradient-end));
    color: white;
}

.pm-memory-detail-stop-btn {
    background: var(--pm-surface-2);
    color: var(--pm-text-2);
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-memory-detail-seeker
 * @tags        themes
 * @description Range input for scrubbing through audio memories, featuring a brand-colored accent.
 * @depends-on  pm-memory-detail-audio-controls, --pm-brand
 * @called-by  none found
 * @updated     2026-04-20
 */
.pm-memory-detail-seeker {
    flex: 1;
    height: 4px;
    cursor: pointer;
    accent-color: var(--pm-brand);
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-memory-detail-time
 * @tags        themes
 * @description Monospace-style time display for audio playback duration and progress.
 * @depends-on  pm-memory-detail-audio-controls, --pm-text-3
 * @called-by  none found
 * @updated     2026-04-20
 */
.pm-memory-detail-time {
    font-size: 0.75rem;
    color: var(--pm-text-3);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-memory-detail-notes
 * @tags        themes
 * @description Primary text container for memory notes within the detail view, featuring standard padding.
 * @depends-on  pm-memory-detail-container, --pm-text-2
 * @called-by  none found
 * @updated     2026-04-20
 */
.pm-memory-detail-notes {
    padding: 0 20px 14px;
    font-size: 0.9rem;
    color: var(--pm-text-2);
    line-height: 1.55;
    white-space: pre-wrap;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-memory-detail-tags
 * @tags        themes
 * @description Flex container for displaying a list of people or place tags in the memory detail view.
 * @depends-on  pm-memory-detail-container
 * @called-by  none found
 * @updated     2026-04-20
 */
.pm-memory-detail-tags {
    padding: 0 20px 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-memory-detail-tag
 * @tags        themes
 * @description Individual pill-styled tag for people or places in the memory detail view.
 * @depends-on  pm-memory-detail-tags, --pm-brand-light, --pm-brand-dark
 * @called-by  none found
 * @updated     2026-04-20
 */
.pm-memory-detail-tag {
    background: var(--pm-brand-light);
    color: var(--pm-brand-dark);
    padding: 4px 10px;
    border-radius: var(--pm-radius-full);
    font-size: 0.78rem;
    font-weight: 600;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-memory-detail-expand-field
 * @tags        themes
 * @description Rounded container for secondary memory details that can be expanded or collapsed.
 * @depends-on  --pm-surface-2, --pm-radius-small
 * @called-by  none found
 * @updated     2026-04-20
 */
.pm-memory-detail-expand-field {
    margin: 0 20px 14px;
    padding: 12px;
    background: var(--pm-surface-2);
    border-radius: var(--pm-radius-small);
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-memory-detail-expand-label
 * @tags        themes
 * @description Small, uppercase bold label for an expandable section in the memory detail view.
 * @depends-on  pm-memory-detail-expand-field, --pm-text-3
 * @called-by  none found
 * @updated     2026-04-20
 */
.pm-memory-detail-expand-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--pm-text-3);
    margin-bottom: 6px;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-memory-detail-expand-content
 * @tags        themes
 * @description The content area within an expandable section, typically containing factual text or lists.
 * @depends-on  pm-memory-detail-expand-field, --pm-text-2
 * @called-by  none found
 * @updated     2026-04-20
 */
.pm-memory-detail-expand-content {
    font-size: 0.9rem;
    color: var(--pm-text-2);
    line-height: 1.5;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-memory-detail-expand-toggle
 * @tags        themes
 * @description Clickable text link used to reveal or hide content within an expandable detail section.
 * @depends-on  --pm-brand
 * @called-by  none found
 * @updated     2026-04-20
 */
.pm-memory-detail-expand-toggle {
    margin-top: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--pm-brand);
    cursor: pointer;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-memory-detail-actions
 * @tags        themes
 * @description Sticky bottom footer in the memory detail view that houses horizontal action buttons.
 * @depends-on  --pm-safe-bottom, --pm-border, --pm-panel-surface
 * @called-by  none found
 * @updated     2026-04-20
 */
.pm-memory-detail-actions {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 10px 20px calc(var(--pm-safe-bottom) + 10px);
    border-top: 1px solid var(--pm-border);
    position: sticky;
    bottom: 0;
    background: var(--pm-panel-surface);
    gap: 6px;
    z-index: 10;
    margin-top: auto;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-memory-detail-action-btn
 * @tags        themes
 * @description Vertical action button with an icon above small text, used in the detail view footer.
 * @depends-on  --pm-radius-small, --pm-text-2
 * @called-by  none found
 * @updated     2026-04-20
 */
.pm-memory-detail-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: var(--pm-radius-small);
    color: var(--pm-text-2);
    font-weight: 600;
}

.pm-memory-detail-action-btn span:first-child { font-size: 1.4rem; line-height: 1; }
.pm-memory-detail-action-btn span:last-child { font-size: 0.7rem; }
.pm-memory-detail-action-btn:active { background: var(--pm-surface-2); }
/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-memory-detail-action-danger
 * @tags        themes
 * @description Text color modifier for destructive action buttons in the memory detail view.
 * @depends-on  --pm-danger
 * @called-by  none found
 * @updated     2026-04-20
 */
.pm-memory-detail-action-danger { color: var(--pm-danger); }

/* Gallery slider */
/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-memory-detail-gallery
 * @tags        themes
 * @description Horizontal scroll-snapping container for multi-photo memory galleries.
 * @called-by  none found
 * @depends-on none
 * @updated     2026-04-20
 */
.pm-memory-detail-gallery {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 10px;
    padding: 14px 20px;
    scrollbar-width: none;
}
/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-memory-detail-slide
 * @tags        themes
 * @description Fixed-width container for individual items within the scroll-snapping memory gallery.
 * @depends-on  pm-memory-detail-gallery
 * @called-by  none found
 * @updated     2026-04-20
 */
.pm-memory-detail-slide {
    flex-shrink: 0;
    width: 85vw;
    scroll-snap-align: center;
}
/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-memory-detail-slide-img
 * @tags        themes
 * @description Image element within a gallery slide, uniformly cropped with medium border radius.
 * @depends-on  pm-memory-detail-slide, --pm-radius-medium
 * @called-by  none found
 * @updated     2026-04-20
 */
.pm-memory-detail-slide-img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: var(--pm-radius-medium);
}
/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-memory-detail-gallery-counter
 * @tags        themes
 * @description Centered text indicator below the gallery showing the current slide index and total count.
 * @depends-on  --pm-text-3
 * @called-by  none found
 * @updated     2026-04-20
 */
.pm-memory-detail-gallery-counter {
    text-align: center;
    font-size: 0.8rem;
    color: var(--pm-text-3);
    margin-top: -8px;
    margin-bottom: 10px;
}

/* Style adjustments for the detail tray */
/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-memory-detail-media-tray
 * @tags        themes
 * @description Container for secondary media actions, styled with standard padding and no top border.
 * @called-by  none found
 * @depends-on none
 * @updated     2026-04-20
 */
.pm-memory-detail-media-tray {
    border-top: none;
    margin-top: 5px;
    padding: 10px 20px;
}