/* ================================================================
   PROJECT MEMORY — theme-clean-capture.css
   Capture flow: pm-sheet-capture, pm-panel-capture-audio,
   pm-panel-capture-video (stub), pm-panel-capture-photo (stub),
   pm-media-tray, pm-media-thumbnail.
   Depends on: theme-clean.css (tokens)
   ================================================================ */

/**
 * @pm-registry
 * @prefix pm
 * @description Real-time audio visualiser canvas.
 * @type        css-class
 * @name        pm-rec-visualiser
 * @tags        TODO
 * @called-by   pm-one-sheet.html
 * @depends-on  --pm-radius-medium, --pm-surface-2
 * @updated 2026-04-18
 */
.pm-rec-visualiser {
    width: 100%;
    height: 90px;
    border-radius: var(--pm-radius-medium);
    background: var(--pm-surface-2);
    display: block;
    margin-bottom: 12px;
}

/**
 * @pm-registry
 * @prefix pm
 * @description Large digital timer for active recordings (00:00).
 * @type        css-class
 * @name        pm-rec-timer
 * @tags        TODO
 * @called-by   pm-one-sheet.html
 * @depends-on  --pm-text-1
 * @updated 2026-04-18
 */
.pm-rec-timer {
    font-size: 2.2rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--pm-text-1);
    letter-spacing: 0.05em;
    margin-bottom: 16px;
    text-align: center;
}

/**
 * @pm-registry
 * @prefix pm
 * @description Horizontal scrolling media tray inside pm-one-sheet.
 * @type        css-class
 * @name        pm-media-tray
 * @tags        TODO
 * @called-by   pm-one-sheet.html
 * @depends-on  --pm-border
 * @updated 2026-04-18
 */
.pm-media-tray {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 10px 4px;
    min-height: 80px;
    border-top: 1px solid var(--pm-border);
    margin-top: 15px;
}


/**
 * @pm-registry
 * @prefix pm
 * @description Square media thumbnail with 'X' remove button.
 * @type        css-class
 * @name        pm-media-thumbnail
 * @tags        TODO
 * @called-by   none found
 * @depends-on  --pm-radius-small, --pm-border, --pm-surface-2
 * @updated 2026-04-18
 */
.pm-media-thumbnail {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--pm-radius-small);
    overflow: hidden;
    cursor: pointer;
    border: 2px solid var(--pm-border);
    background: var(--pm-surface-2);
}

.pm-media-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/**
 * @pm-registry
 * @prefix pm
 * @description Audio-specific thumbnail variant with gradient background.
 * @type        css-class
 * @name        pm-media-thumbnail-audio
 * @tags        TODO
 * @called-by   none found
 * @depends-on  --pm-home-grad-start, --pm-home-grad-end
 * @updated 2026-04-18
 */
.pm-media-thumbnail-audio {
    background: linear-gradient(135deg, var(--pm-home-grad-start), var(--pm-home-grad-end));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-media-thumbnail-audio-icon
 * @tags        themes
 * @description Large emoji or icon representing an audio file within a media thumbnail preview.
 * @depends-on  pm-media-thumbnail-audio
 * @called-by  none found
 * @updated     2026-04-20
 */
.pm-media-thumbnail-audio-icon {
    font-size: 1.4rem;
    line-height: 1;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-media-thumbnail-audio-label
 * @tags        themes
 * @description Small text label (e.g., 'VOICE') displayed beneath the audio icon in a media thumbnail.
 * @depends-on  pm-media-thumbnail-audio
 * @called-by  none found
 * @updated     2026-04-20
 */
.pm-media-thumbnail-audio-label {
    font-size: 0.55rem;
    color: white;
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
    padding: 0 2px;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-media-thumbnail-remove
 * @tags        themes
 * @description Circular 'X' button positioned at the top-right of a media thumbnail for removing the asset.
 * @depends-on  pm-media-thumbnail
 * @called-by  none found
 * @updated     2026-04-20
 */
.pm-media-thumbnail-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    background: var(--pm-overlay-dark-strong);
    color: white;
    border-radius: 50%;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

/**
 * @pm-registry
 * @prefix pm
 * @description Row containing 'Add More' buttons (Audio/Photo/Video).
 * @type        css-class
 * @name        pm-add-row
 * @tags        TODO
 * @called-by   pm-one-sheet.html
 * @depends-on  --pm-border
 * @updated 2026-04-18
 */
.pm-add-row {
    padding: 12px 0;
    border-top: 1px solid var(--pm-border);
}

/**
 * @pm-registry
 * @prefix pm
 * @description Wrapper for the multiple recording list inside the One Sheet.
 * @type        css-class
 * @name        pm-one-audio-list
 * @tags        TODO
 * @called-by   none found
 * @depends-on  none
 * @updated 2026-04-18
 */
.pm-one-audio-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
    width: 100%;
}

/**
 * @pm-registry
 * @prefix pm
 * @description Single audio item row with player and label.
 * @type        css-class
 * @name        pm-one-audio-item
 * @tags        TODO
 * @called-by   none found
 * @depends-on  --pm-surface-2, --pm-radius-small
 * @updated 2026-04-18
 */
.pm-one-audio-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    background: var(--pm-surface-2);
    border-radius: var(--pm-radius-small);
    padding: 8px 12px;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-one-audio-label
 * @tags        themes
 * @description Semi-bold text label identifying a single audio recording in the capture view list.
 * @depends-on  pm-one-audio-item, --pm-text-2
 * @called-by  none found
 * @updated     2026-04-20
 */
.pm-one-audio-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--pm-text-2);
    white-space: nowrap;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-one-audio-player
 * @tags        themes
 * @description Compact HTML5 audio player for reviewing a single recording in the capture list.
 * @depends-on  pm-one-audio-item
 * @called-by  none found
 * @updated     2026-04-20
 */
.pm-one-audio-player {
    width: 100%;
    height: 32px;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-one-audio-remove
 * @tags        themes
 * @description Action button to delete a specific audio recording from the capture list.
 * @depends-on  pm-one-audio-item
 * @called-by  none found
 * @updated     2026-04-20
 */
.pm-one-audio-remove {
    width: 26px;
    height: 26px;
    border: none;
    background: var(--pm-danger-light);
    color: var(--pm-danger);
    border-radius: var(--pm-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.75rem;
}

/* === HD VIDEO RECORDER OVERLAY === */

/**
 * @pm-registry
 * @type css
 * @name pm-video-recorder-overlay
 * @description Full-screen black overlay for the in-app HD video recorder. Flex column:
 *   header bar → live preview (flex:1) → footer controls.
 *   JS toggles display via style.display = 'flex' / 'none'.
 * @called-by  none found
 * @depends-on none
 * @tags        TODO
 * @updated 2026-04-26
 */
#video-recorder-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--pm-text-1);
    z-index: 3000;
    flex-direction: column;
}

/**
 * @pm-registry
 * @type css
 * @name pm-video-rec-header
 * @description Top bar of the video recorder: cancel button left, quality indicator centre, flip button right.
 * @called-by  pm-video-recorder.html
 * @depends-on none
 * @tags        TODO
 * @updated 2026-04-26
 */
.pm-video-rec-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--pm-overlay-dark-mid);
    flex-shrink: 0;
}

/**
 * @pm-registry
 * @type css
 * @name pm-video-rec-close
 * @description Cancel/close button in the video recorder header.
 * @called-by  pm-video-recorder.html
 * @depends-on none
 * @tags        TODO
 * @updated 2026-04-26
 */
.pm-video-rec-close,
/**
 * @pm-registry
 * @type css
 * @name pm-video-rec-flip
 * @description Flip camera button in the video recorder header.
 * @called-by  pm-video-recorder.html
 * @depends-on none
 * @tags        TODO
 * @updated 2026-04-26
 */
.pm-video-rec-flip {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: var(--pm-overlay-white-faint);
    color: var(--pm-panel-surface);
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/**
 * @pm-registry
 * @type css
 * @name pm-video-rec-quality
 * @description Quality indicator text (e.g. "1920×1080 FHD ✓") in the recorder header.
 * @called-by  pm-video-recorder.html
 * @depends-on none
 * @tags        TODO
 * @updated 2026-04-26
 */
.pm-video-rec-quality {
    font-size: 0.72rem;
    color: var(--pm-overlay-white-muted);
    text-align: center;
    flex: 1;
}

#video-preview {
    flex: 1;
    width: 100%;
    min-height: 0;
    object-fit: cover;
    display: block;
    background: var(--pm-text-1);
}

/**
 * @pm-registry
 * @type css
 * @name pm-video-rec-footer
 * @description Bottom control area of the video recorder: timer above record button, centred.
 * @called-by  pm-video-recorder.html
 * @depends-on none
 * @tags        TODO
 * @updated 2026-04-26
 */
.pm-video-rec-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px 16px 32px;
    background: var(--pm-overlay-dark-mid);
    flex-shrink: 0;
}

/**
 * @pm-registry
 * @type css
 * @name pm-video-rec-timer
 * @description Elapsed recording timer (00:00) shown above the record button while recording.
 * @called-by  pm-video-recorder.html
 * @depends-on none
 * @tags        TODO
 * @updated 2026-04-26
 */
.pm-video-rec-timer {
    color: var(--pm-panel-surface);
    font-size: 1.1rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.05em;
}

/**
 * @pm-registry
 * @type css
 * @name pm-video-rec-btn
 * @description Outer ring of the record button. White circle border, transparent fill.
 * @called-by  pm-video-recorder.html
 * @depends-on none
 * @tags        TODO
 * @updated 2026-04-26
 */
.pm-video-rec-btn {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 4px solid var(--pm-panel-surface);
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/**
 * @pm-registry
 * @type css
 * @name pm-video-rec-inner
 * @description Inner shape of the record button. Circle (idle) → rounded square (recording).
 *   JS toggles border-radius and dimensions on pmToggleHDRecording.
 * @called-by  pm-video-recorder.html
 * @depends-on none
 * @tags        TODO
 * @updated 2026-04-26
 */
.pm-video-rec-inner {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--pm-danger);
    transition: border-radius 0.2s, width 0.2s, height 0.2s;
}

@media (orientation: landscape) {
    #video-recorder-overlay {
        flex-direction: row;
    }
    .pm-video-rec-header {
        flex-direction: column;
        width: 70px;
        height: 100%;
        padding: 20px 10px;
    }
    .pm-video-rec-footer {
        flex-direction: column;
        width: 100px;
        height: 100%;
        padding: 20px 10px;
        justify-content: center;
    }
    #video-preview {
        height: 100%;
        width: auto;
        flex: 1;
    }
}


/* ----------------------------------------------------------------
   ONESHEET CAPTURE BUTTONS — brand-tint style
   Scoped to pm-sheet-capture so home panel buttons are unaffected.
   All values use CSS variables — night mode and theme changes apply automatically.
   ---------------------------------------------------------------- */

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-sheet-capture
 * @tags        themes
 * @description Scopes styles for the one-sheet capture buttons, preventing them from affecting home panel buttons.
 * @called-by  pm-one-sheet.html
 * @depends-on --pm-brand-light, --pm-border
 * @updated     2026-05-03
 */
.pm-sheet-capture .pm-home-button {
    background: var(--pm-brand-light);
    border: 1.5px solid var(--pm-border);
    box-shadow: var(--pm-shadow-small);
}

.pm-sheet-capture .pm-home-button:active {
    background: var(--pm-brand);
}

.pm-sheet-capture .pm-home-button-icon {
    background: var(--pm-overlay-white-mid);
}

.pm-sheet-capture .pm-home-button-label {
    color: var(--pm-text-1);
}

.pm-sheet-capture .pm-home-button:active .pm-home-button-label {
    color: white;
}

/* "Add to this memory:" label — white is for dark home bg, override for light sheet */
.pm-sheet-capture .pm-home-group-label {
    color: var(--pm-text-2);
}

/* Audio thumbnail label — use global text colour instead of hardcoded white */
.pm-media-thumbnail-audio-label {
    color: var(--pm-text-1);
}