/* ================================================================
   PROJECT MEMORY — theme-clean-notes.css
   Notes panel: picker row, search row, card container,
   note cards (collapsed + expanded), asset icons, audio player,
   and card actions.
   Note edit modal assets, categories, and empty state moved to
   theme-clean-notes-modal.css.
   Depends on: theme-clean.css (tokens), theme-clean-forms.css,
               theme-clean-buttons.css, theme-clean-modals.css
   ================================================================ */


/* ----------------------------------------------------------------
   PICKER ROW
   Two large Voice / Type buttons at top of notes panel.
   ---------------------------------------------------------------- */

/**
 * @pm-registry
 * @prefix pm
 * @description Two-button picker row at the top of the notes panel.
 *   Voice Note and Type Note side by side.
 * @apps project-memory
 * @type        css-class
 * @name        pm-notes-picker-row
 * @tags        TODO
 * @called-by   pm-panel-notes.html
 * @depends-on  --pm-panel-surface, --pm-border
 * @updated 2026-04-13
 */
.pm-notes-picker-row {
    display: flex;
    gap: 10px;
    padding: 14px 14px 10px;
    background: var(--pm-panel-surface);
    border-bottom: 1px solid var(--pm-border);
    flex-shrink: 0;
}

.pm-notes-picker-row .pm-button-action {
    flex: 1;
    padding: 14px 10px;
    font-size: 0.95rem;
}


/* ----------------------------------------------------------------
   SEARCH ROW
   Search input + Categories button on one line.
   ---------------------------------------------------------------- */

/**
 * @pm-registry
 * @prefix pm
 * @description Search bar row — input left, Categories button right.
 * @apps project-memory
 * @type        css-class
 * @name        pm-notes-search-row
 * @tags        TODO
 * @called-by   pm-panel-notes.html
 * @depends-on  --pm-panel-surface, --pm-border
 * @updated 2026-04-13
 */
.pm-notes-search-row {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 10px 14px 8px;
    background: var(--pm-panel-surface);
    border-bottom: 1px solid var(--pm-border);
    flex-shrink: 0;
}

.pm-notes-search-row .pm-input {
    flex: 1;
}


/* ----------------------------------------------------------------
   CARD CONTAINER
   ---------------------------------------------------------------- */

/**
 * @pm-registry
 * @prefix pm
 * @description Scrollable container for note cards.
 *   Populated by notesService.js.
 * @apps project-memory
 * @type        css-class
 * @name        pm-notes-list
 * @tags        TODO
 * @called-by   pm-panel-notes.html
 * @depends-on  --pm-safe-bottom
 * @updated 2026-04-13
 */
.pm-notes-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px 0 calc(var(--pm-safe-bottom) + 16px);
}


/* ----------------------------------------------------------------
   NOTE CARD — BASE
   ---------------------------------------------------------------- */

/**
 * @pm-registry
 * @prefix pm
 * @description Single note card. Collapsed by default.
 *   pm-expanded class added by notesService on tap.
 * @apps project-memory
 * @type        css-class
 * @name        pm-card-note
 * @tags        TODO
 * @called-by   none found
 * @depends-on  --pm-panel-surface, --pm-radius-medium, --pm-border, --pm-shadow-small
 * @updated 2026-04-13
 */
.pm-card-note {
    background: var(--pm-panel-surface);
    border-radius: var(--pm-radius-medium);
    border: 1px solid var(--pm-border);
    padding: 14px;
    margin-bottom: 10px;
    box-shadow: var(--pm-shadow-small);
    cursor: pointer;
    transition: box-shadow 0.15s;
}

.pm-card-note.pm-expanded {
    cursor: default;
    box-shadow: var(--pm-shadow-medium);
}


/* ----------------------------------------------------------------
   NOTE CARD — COLLAPSED CHILDREN
   ---------------------------------------------------------------- */

/**
 * @pm-registry
 * @prefix pm
 * @description Category pill on a note card — blue, small, uppercase.
 * @apps project-memory
 * @type        css-class
 * @name        pm-card-note-category
 * @tags        TODO
 * @called-by   none found
 * @depends-on  --pm-radius-full, --pm-brand-light, --pm-brand-dark
 * @updated 2026-04-13
 */
.pm-card-note-category {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--pm-radius-full);
    background: var(--pm-brand-light);
    color: var(--pm-brand-dark);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

/**
 * @pm-registry
 * @prefix pm
 * @description Note title — bold, primary text colour.
 * @apps project-memory
 * @type        css-class
 * @name        pm-card-note-title
 * @tags        TODO
 * @called-by   none found
 * @depends-on  --pm-text-1
 * @updated 2026-04-13
 */
.pm-card-note-title {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--pm-text-1);
    margin-bottom: 4px;
}

/**
 * @pm-registry
 * @prefix pm
 * @description Truncated content preview — first ~2 lines, muted.
 *   Hidden when card is expanded.
 * @apps project-memory
 * @type        css-class
 * @name        pm-card-note-preview
 * @tags        TODO
 * @called-by   none found
 * @depends-on  --pm-text-2
 * @updated 2026-04-13
 */
.pm-card-note-preview {
    font-size: 0.85rem;
    color: var(--pm-text-2);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 6px;
}

.pm-card-note.pm-expanded .pm-card-note-preview {
    display: none;
}

/**
 * @pm-registry
 * @prefix pm
 * @description Meta row — date, voice icon, asset icons.
 *   Always visible in both collapsed and expanded states.
 * @apps project-memory
 * @type        css-class
 * @name        pm-card-note-meta
 * @tags        TODO
 * @called-by   none found
 * @depends-on  --pm-text-3
 * @updated 2026-04-13
 */
.pm-card-note-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.78rem;
    color: var(--pm-text-3);
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-card-note-date
 * @tags        notes
 * @description Small date display on the note card meta row.
 * @depends-on  --pm-text-3
 * @called-by  none found
 * @updated     2026-04-15
 */
.pm-card-note-date {
    flex-shrink: 0;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-card-note-voice-icon
 * @tags        notes
 * @description Emoji or icon indicating the note has an associated voice recording.
 * @depends-on  none
 * @called-by  none found
 * @updated     2026-04-15
 */
.pm-card-note-voice-icon {
    font-size: 0.85rem;
    flex-shrink: 0;
}


/* ----------------------------------------------------------------
   NOTE CARD — EXPANDED CHILDREN
   ---------------------------------------------------------------- */

/**
 * @pm-registry
 * @prefix pm
 * @description Full note content — shown only when card is expanded.
 *   Good readable typography — larger font, generous line-height.
 * @apps project-memory
 * @type        css-class
 * @name        pm-card-note-body
 * @tags        TODO
 * @called-by   none found
 * @depends-on  --pm-text-1, --pm-surface-2, --pm-radius-small
 * @updated 2026-04-13
 */
.pm-card-note-body {
    display: none;
    font-size: 0.95rem;
    color: var(--pm-text-1);
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 10px 0;
    padding: 12px;
    background: var(--pm-surface-2);
    border-radius: var(--pm-radius-small);
    max-height: 400px;
    overflow-y: auto;
}

.pm-card-note.pm-expanded .pm-card-note-body {
    display: block;
}

/**
 * @pm-registry
 * @prefix pm
 * @description Asset icon row — shown in expanded state.
 *   Each icon tappable — opens lightbox (stub until pm-lightbox built).
 * @apps project-memory
 * @type        css-class
 * @name        pm-card-note-assets
 * @tags        TODO
 * @called-by   none found
 * @depends-on  none
 * @updated 2026-04-13
 */
.pm-card-note-assets {
    display: none;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.pm-card-note.pm-expanded .pm-card-note-assets {
    display: flex;
}

/**
 * @pm-registry
 * @prefix pm
 * @description Single asset icon button in pm-card-note-assets.
 *   Shows emoji icon + count badge if multiples.
 * @apps project-memory
 * @type        css-class
 * @name        pm-card-note-asset-icon
 * @tags        TODO
 * @called-by   none found
 * @depends-on  --pm-radius-full, --pm-border, --pm-surface-2, --pm-text-2
 * @updated 2026-04-13
 */
.pm-card-note-asset-icon {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border-radius: var(--pm-radius-full);
    border: 1.5px solid var(--pm-border);
    background: var(--pm-surface-2);
    font-size: 0.85rem;
    color: var(--pm-text-2);
    cursor: pointer;
    transition: background 0.15s;
}

.pm-card-note-asset-icon:active {
    background: var(--pm-brand-light);
}

/**
 * @pm-registry
 * @prefix pm
 * @description AI summary label — shown above summary text in expanded card.
 *   Hidden in collapsed state.
 * @apps project-memory
 * @type        css-class
 * @name        pm-card-note-summary-label
 * @tags        TODO
 * @called-by   none found
 * @depends-on  --pm-text-3
 * @updated 2026-04-13
 */
.pm-card-note-summary-label {
    display: none;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--pm-text-3);
    margin-top: 10px;
    margin-bottom: 2px;
}

/**
 * @pm-registry
 * @prefix pm
 * @description AI-generated summary text — shown in expanded card above full content.
 *   Italic, muted colour. Hidden in collapsed state.
 * @apps project-memory
 * @type        css-class
 * @name        pm-card-note-summary
 * @tags        TODO
 * @called-by   none found
 * @depends-on  --pm-text-2
 * @updated 2026-04-13
 */
.pm-card-note-summary {
    display: none;
    font-size: 0.88rem;
    color: var(--pm-text-2);
    font-style: italic;
    line-height: 1.55;
    margin-bottom: 6px;
}

.pm-card-note.pm-expanded .pm-card-note-summary-label,
.pm-card-note.pm-expanded .pm-card-note-summary {
    display: block;
}

/**
 * @pm-registry
 * @prefix pm
 * @description Location badge (📍) in the card meta row.
 *   Shown only when note has GPS coordinates.
 * @apps project-memory
 * @type        css-class
 * @name        pm-card-note-location
 * @tags        TODO
 * @called-by   none found
 * @depends-on  none
 * @updated 2026-04-13
 */
.pm-card-note-location {
    font-size: 0.85rem;
    flex-shrink: 0;
    cursor: default;
}

/**
 * @pm-registry
 * @prefix pm
 * @description Action button row — shown only when card is expanded.
 *   Edit, Attach, Email, Push to Memory, Delete.
 * @apps project-memory
 * @type        css-class
 * @name        pm-card-note-actions
 * @tags        TODO
 * @called-by   none found
 * @depends-on  --pm-border
 * @updated 2026-04-13
 */
.pm-card-note-actions {
    display: none;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--pm-border);
}

.pm-card-note.pm-expanded .pm-card-note-actions {
    display: flex;
}