/* ================================================================
   PROJECT MEMORY — theme-clean-shared.css
   Shared UI primitives used across the whole app:
   pm-toast, pm-banner-audio-unlock, pm-banner-reminder-alert.
   Anything that appears regardless of which panel is active lives here.
   Depends on: theme-clean.css (tokens)
   ================================================================ */


/* ----------------------------------------------------------------
   TOAST
   Brief notification that slides up from the bottom and auto-dismisses.
   JS adds pm-active to show, removes it to hide.
   ---------------------------------------------------------------- */

/**
 * @pm-registry
 * @prefix pm
 * @description Brief notification message. Slides up from the bottom,
 *   auto-dismisses after 2 seconds. Shown via pmShowToast(message).
 *   pm-active controls visibility — added by JS.
 * @apps project-memory
 * @type        css-class
 * @name        pm-toast
 * @tags        TODO
 * @called-by   none found
 * @depends-on  --pm-panel-surface, --pm-brand, --pm-radius-medium, --pm-z-critical
 * @updated 2026-04-13
 */
.pm-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.92);
    background: var(--pm-panel-surface);
    border-left: 4px solid var(--pm-brand);
    border-radius: var(--pm-radius-medium);
    box-shadow: var(--pm-shadow-large);
    padding: 16px 24px 16px 20px;
    min-width: 240px;
    max-width: 320px;
    z-index: var(--pm-z-critical);
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
}

.pm-toast.pm-active {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/**
 * @pm-registry
 * @prefix pm
 * @description Primary line of text inside pm-toast.
 * @apps project-memory
 * @type        css-class
 * @name        pm-toast-title
 * @tags        TODO
 * @called-by   none found
 * @depends-on  --pm-text-1, --pm-border
 * @updated 2026-04-13
 */
.pm-toast-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--pm-text-1);
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--pm-border);
    text-align: center;
}

/**
 * @pm-registry
 * @prefix pm
 * @description Secondary line of text inside pm-toast.
 * @apps project-memory
 * @type        css-class
 * @name        pm-toast-subtitle
 * @tags        TODO
 * @called-by   none found
 * @depends-on  --pm-text-3
 * @updated 2026-04-13
 */
.pm-toast-subtitle {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--pm-text-3);
}


/* ----------------------------------------------------------------
   GLOBAL BANNERS
   Fixed position UI that appears regardless of active panel.
   ---------------------------------------------------------------- */

/**
 * @pm-registry
 * @prefix pm
 * @description Audio unlock prompt — fixed at bottom of screen.
 *   Hidden by default. Shown by voiceService when audio context
 *   is locked. pm-active makes it visible.
 * @apps project-memory
 * @type        css-class
 * @name        pm-banner-audio-unlock
 * @tags        TODO
 * @called-by   pm-banner-global.html
 * @depends-on  --pm-safe-bottom, --pm-z-critical, --pm-text-1, --pm-radius-medium, --pm-shadow-medium
 * @updated 2026-04-13
 */
.pm-banner-audio-unlock {
    display: none;
    position: fixed;
    bottom: calc(var(--pm-safe-bottom) + 70px);
    left: 12px;
    right: 12px;
    z-index: var(--pm-z-critical);
    padding: 12px 16px;
    background: var(--pm-text-1);
    color: white;
    border-radius: var(--pm-radius-medium);
    align-items: center;
    gap: 12px;
    box-shadow: var(--pm-shadow-medium);
}

.pm-banner-audio-unlock.pm-active {
    display: flex;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-banner-audio-unlock-text
 * @tags        shared
 * @description Text area within the audio unlock banner, provides instruction to the user.
 * @depends-on  none
 * @called-by  pm-banner-global.html
 * @updated     2026-04-15
 */
.pm-banner-audio-unlock-text {
    flex: 1;
    font-size: 0.9rem;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-banner-audio-unlock-button
 * @tags        shared
 * @description Action button inside the audio unlock banner, styled as a rounded pill.
 * @depends-on  --pm-brand, --pm-radius-full
 * @called-by  pm-banner-global.html
 * @updated     2026-04-15
 */
.pm-banner-audio-unlock-button {
    background: var(--pm-brand);
    color: white;
    font-weight: 700;
    padding: 8px 18px;
    border-radius: var(--pm-radius-full);
    white-space: nowrap;
    cursor: pointer;
}

/**
 * @pm-registry
 * @prefix pm
 * @description Reminder alert banner — fixed at top of screen.
 *   Hidden by default. Shown by reminderService.showBanner().
 *   pm-active makes it visible.
 * @apps project-memory
 * @type        css-class
 * @name        pm-banner-reminder-alert
 * @tags        TODO
 * @called-by   pm-banner-global.html
 * @depends-on  --pm-z-critical, --pm-brand, --pm-shadow-medium
 * @updated 2026-04-13
 */
.pm-banner-reminder-alert {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--pm-z-critical);
    padding: 14px 16px;
    background: var(--pm-brand);
    color: white;
    align-items: center;
    gap: 12px;
    box-shadow: var(--pm-shadow-medium);
}

.pm-banner-reminder-alert.pm-active {
    display: flex;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-banner-reminder-alert-text
 * @tags        shared
 * @description Main message area for the global reminder alert banner.
 * @depends-on  none
 * @called-by  pm-banner-global.html
 * @updated     2026-04-15
 */
.pm-banner-reminder-alert-text {
    flex: 1;
    font-weight: 600;
    font-size: 0.95rem;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-banner-reminder-alert-view
 * @tags        shared
 * @description "View" action button in the reminder alert banner, semi-transparent pill style.
 * @depends-on  --pm-radius-full
 * @called-by  pm-banner-global.html
 * @updated     2026-04-15
 */
.pm-banner-reminder-alert-view {
    background: var(--pm-overlay-white-soft);
    color: white;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: var(--pm-radius-full);
    cursor: pointer;
    white-space: nowrap;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-banner-reminder-alert-close
 * @tags        shared
 * @description Close icon button for the global reminder alert banner.
 * @depends-on  none
 * @called-by  pm-banner-global.html
 * @updated     2026-04-15
 */
.pm-banner-reminder-alert-close {
    color: white;
    font-size: 1.2rem;
    padding: 0 4px;
    cursor: pointer;
}

/* Utility — hides an element while preserving its space in the DOM flow */
/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-hidden
 * @tags        shared
 * @description Utility class to force an element to display: none.
 * @depends-on  none
 * @called-by  pm-modal-memory-edit.html
 * @updated     2026-04-15
 */
.pm-hidden {
    display: none !important;
}

/* ── share options modal ──────────────────────────────────────── */
.pm-share-picker-hint           { font-size: 0.85rem; color: var(--pm-text-2); margin-bottom: 8px; }
.pm-share-options-memory-title  { font-size: 1rem; font-weight: 600; color: var(--pm-text-1); margin-bottom: 4px; }
.pm-share-options-list          { display: flex; flex-direction: column; }
.pm-share-option-row            { display: flex; align-items: center; gap: 12px; padding: 14px 0;
                                   border-bottom: 1px solid var(--pm-border); cursor: pointer; }
.pm-share-option-row:last-child { border-bottom: none; }
.pm-share-option-checkbox       { width: 20px; height: 20px; flex-shrink: 0; cursor: pointer; }
.pm-share-option-label          { font-size: 1rem; color: var(--pm-text-1); }