/* ================================================================
   PROJECT MEMORY — theme-clean-shell.css
   App shell: pm-app, pm-app-column, panels base, pm-hero, pm-header.
   Depends on: theme-clean.css (tokens)
   ================================================================ */


/* ----------------------------------------------------------------
   APP SHELL
   pm-app        — full-screen root, carries gradient on home
   pm-app-column — centered column on desktop, full-width on mobile
   ---------------------------------------------------------------- */

/**
 * @pm-registry
 * @prefix pm
 * @description Full-screen root container. Receives pm-app--home
 *   modifier when the home panel is active to apply the full-bleed
 *   gradient background.
 * @apps project-memory
 * @type        css-class
 * @name        pm-app
 * @tags        TODO
 * @called-by   none found
 * @depends-on  --pm-background
 * @updated 2026-04-13
 */
.pm-app {
    width: 100%;
    min-height: 100dvh;
    position: relative;
    background: var(--pm-background);
    transition: background 0.3s ease;
}

/**
 * @pm-registry
 * @prefix pm
 * @description Home panel modifier on pm-app. Applies the full-bleed
 *   gradient behind the centered column so it covers the entire
 *   viewport on desktop.
 * @apps project-memory
 * @type        css-class
 * @name        pm-app--home
 * @tags        TODO
 * @called-by   none found
 * @depends-on  --pm-home-gradient-start, --pm-home-gradient-end
 * @updated 2026-04-13
 */
.pm-app--home {
    background: linear-gradient(
        160deg,
        var(--pm-home-gradient-start) 0%,
        var(--pm-home-gradient-end) 100%
    );
}

/**
 * @pm-registry
 * @prefix pm
 * @description Centered content column. Full width on mobile.
 *   On desktop: max-width 50vw, min-width 480px, centered with
 *   auto margins. All panels and sheets live inside this element.
 *   Fixed-position overlays (modals, lightbox) use pm-app as their
 *   stacking context instead.
 * @apps project-memory
 * @type        css-class
 * @name        pm-app-column
 * @tags        TODO
 * @called-by   none found
 * @depends-on  none
 * @updated 2026-04-13
 */
.pm-app-column {
    width: 100%;
    min-height: 100dvh;
    position: relative;
    display: flex;
    flex-direction: column;
    padding-top: var(--pm-safe-top);
}

@media (min-width: 768px) {
    .pm-app-column {
        max-width: var(--pm-column-max);
        min-width: var(--pm-column-min);
        margin: 0 auto;
    }
}


/* ----------------------------------------------------------------
   PANELS
   All pm-panel-* elements are hidden by default.
   JS adds pm-active to show the current panel.
   ---------------------------------------------------------------- */

/**
 * @pm-registry
 * @prefix pm
 * @type        css-attribute-selector
 * @name        pm-panel-base
 * @description Base panel styles shared by all top-level views.
 *   All panels are hidden by default. pmSwitchPanel() adds pm-active
 *   to the target panel to make it visible.
 * @apps project-memory
 * @tags        layout
 * @called-by   index.html (matched by attribute selector — all pm-panel-* elements)
 * @depends-on  --pm-panel-background
 * @updated 2026-04-13
 */
[class*="pm-panel-"] {
    display: none;
}

[class*="pm-panel-"].pm-active {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    background: var(--pm-panel-background);
}

/* Home panel is transparent — lets pm-app--home gradient show through */
.pm-panel-home.pm-active {
    background: transparent;
}


/* ----------------------------------------------------------------
   HERO  (pm-panel-home only)
   ---------------------------------------------------------------- */

/**
 * @pm-registry
 * @prefix pm
 * @description Home panel hero area — logo, greeting text, avatar.
 *   Only used inside pm-panel-home. Not a generic header pattern.
 * @apps project-memory
 * @type        css-class
 * @name        pm-hero
 * @tags        TODO
 * @called-by   none found
 * @depends-on  none
 * @updated 2026-04-13
 */
.pm-hero {
    position: relative;
    z-index: 1;
    padding: clamp(10px, 2.5dvh, 18px) 16px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}


/* ----------------------------------------------------------------
   HEADER  (all panels except home)
   ---------------------------------------------------------------- */

/**
 * @pm-registry
 * @prefix pm
 * @description Standard panel header — title left, action buttons right.
 *   Used by all panels except pm-panel-home which uses pm-hero.
 * @apps project-memory
 * @type        css-class
 * @name        pm-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-panel-calendar.html
 * @depends-on  --pm-border, --pm-surface
 * @updated 2026-04-13
 */
.pm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--pm-border);
    background: var(--pm-surface);
    flex-shrink: 0;
}

/**
 * @pm-registry
 * @prefix pm
 * @description Panel title text inside pm-header.
 * @apps project-memory
 * @type        css-class
 * @name        pm-header-title
 * @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-panel-calendar.html
 * @depends-on  --pm-text-1
 * @updated 2026-04-13
 */
.pm-header-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--pm-text-1);
    margin: 0;
}

/**
 * @pm-registry
 * @prefix pm
 * @description Right-side button group inside pm-header (help, close etc).
 * @apps project-memory
 * @type        css-class
 * @name        pm-header-actions
 * @tags        TODO
 * @called-by   pm-panel-calendar.html
 * @depends-on  none
 * @updated 2026-04-13
 */
.pm-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/**
 * @pm-registry
 * @prefix pm
 * @description Icon-only button in pm-header-actions (help, settings etc).
 *   Sits alongside the ✕ close button.
 * @apps project-memory
 * @type        css-class
 * @name        pm-header-icon-btn
 * @tags        TODO
 * @called-by   pm-modal-calendar-help.html, pm-modal-merge.html, pm-panel-calendar.html
 * @depends-on  --pm-radius-small, --pm-text-1
 * @updated 2026-04-13
 */
.pm-header-icon-btn {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: var(--pm-radius-small);
    color: var(--pm-text-1);
    transition: background 0.15s;
    line-height: 1;
}

.pm-header-icon-btn:active {
    background: var(--pm-surface-2);
}