/* ================================================================
   PROJECT MEMORY — theme-clean-help.css
   All help modal CSS — shared across every help modal in the app.
   Used by: reminders, notes, dates, people, places, search, home,
            calendar, voice settings, note categories.
   Depends on: theme-clean.css (tokens)
   ================================================================ */


/* ----------------------------------------------------------------
   HELP MODAL — CORE STRUCTURE
   Sections, titles, body text, keyword rows.
   ---------------------------------------------------------------- */

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-help-section
 * @tags        help
 * @description Container for one block of content within a help modal. Adds spacing and a bottom border separator between sections.
 * @called-by   pm-modal-calendar-help.html, pm-modal-home-help.html, pm-modal-note-categories-help.html, pm-modal-notes-help.html, pm-modal-people-help.html, pm-modal-places-help.html, pm-modal-reminders-help.html, pm-modal-search-help.html, pm-modal-voice-settings-help.html, pm-panel-calendar.html
 * @depends-on  --pm-border
 * @updated     2026-05-05
 */
.pm-help-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--pm-border);
}

.pm-help-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-help-section-title
 * @tags        help
 * @description Brand-coloured title for a help section, with an underline rule.
 * @called-by   pm-modal-calendar-help.html, pm-modal-home-help.html, pm-modal-note-categories-help.html, pm-modal-notes-help.html, pm-modal-people-help.html, pm-modal-places-help.html, pm-modal-reminders-help.html, pm-modal-search-help.html, pm-modal-voice-settings-help.html, pm-panel-calendar.html
 * @depends-on  --pm-brand, --pm-brand-light
 * @updated     2026-05-05
 */
.pm-help-section-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--pm-brand);
    padding-bottom: 6px;
    margin-bottom: 10px;
    border-bottom: 2px solid var(--pm-brand-light);
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-help-section-body
 * @tags        help
 * @description Paragraph text within a help section.
 * @called-by   pm-modal-calendar-help.html, pm-modal-home-help.html, pm-modal-note-categories-help.html, pm-modal-notes-help.html, pm-modal-people-help.html, pm-modal-places-help.html, pm-modal-reminders-help.html, pm-modal-search-help.html, pm-modal-voice-settings-help.html, pm-panel-calendar.html
 * @depends-on  --pm-text-2
 * @updated     2026-05-05
 */
.pm-help-section-body {
    font-size: 0.9rem;
    color: var(--pm-text-2);
    line-height: 1.5;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-help-row
 * @tags        help
 * @description Flex row aligning a keyword badge and its description text side by side.
 * @called-by   pm-modal-home-help.html, pm-modal-note-categories-help.html, pm-modal-notes-help.html, pm-modal-people-help.html, pm-modal-places-help.html, pm-modal-reminders-help.html, pm-modal-search-help.html, pm-modal-voice-settings-help.html
 * @depends-on  --pm-text-2
 * @updated     2026-05-05
 */
.pm-help-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 0.88rem;
    color: var(--pm-text-2);
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-help-keyword
 * @tags        help
 * @description Monospace keyword badge within a help row — brand-tinted background with dark brand text.
 * @called-by   pm-modal-home-help.html, pm-modal-note-categories-help.html, pm-modal-notes-help.html, pm-modal-people-help.html, pm-modal-places-help.html, pm-modal-reminders-help.html, pm-modal-search-help.html, pm-modal-voice-settings-help.html, pm-panel-calendar.html
 * @depends-on  --pm-brand-light, --pm-brand-dark, --pm-radius-small
 * @updated     2026-05-05
 */
.pm-help-keyword {
    font-family: monospace;
    font-size: 0.82rem;
    font-weight: 700;
    background: var(--pm-brand-light);
    color: var(--pm-brand-dark);
    padding: 2px 8px;
    border-radius: var(--pm-radius-small);
    white-space: nowrap;
    flex-shrink: 0;
}


/* ----------------------------------------------------------------
   HELP MODAL — ENHANCED LAYOUT
   Badge rows, icon rows, pill rows, example blocks.
   ---------------------------------------------------------------- */

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-help-badge-row
 * @tags        help
 * @description Flex row for displaying a badge and its description text.
 * @called-by   pm-modal-reminders-help.html
 * @depends-on  none
 * @updated     2026-05-05
 */
.pm-help-badge-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 7px;
    font-size: 0.88rem;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-help-badge-desc
 * @tags        help
 * @description Description text paired with a badge in a help badge row.
 * @called-by   pm-modal-reminders-help.html
 * @depends-on  --pm-text-2
 * @updated     2026-05-05
 */
.pm-help-badge-desc {
    color: var(--pm-text-2);
    font-size: 0.88rem;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-help-icon-row
 * @tags        help
 * @description Flex row for displaying an icon and its description text.
 * @called-by   pm-modal-reminders-help.html
 * @depends-on  --pm-text-2
 * @updated     2026-05-05
 */
.pm-help-icon-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    font-size: 0.88rem;
    color: var(--pm-text-2);
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-help-icon
 * @tags        help
 * @description Fixed-size icon container within a help icon row.
 * @called-by   pm-modal-reminders-help.html
 * @depends-on  none
 * @updated     2026-05-05
 */
.pm-help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 31px;
    height: 31px;
    font-size: 1.26rem;
    flex-shrink: 0;
}

.pm-help-icon.pm-help-icon-green {
    color: var(--pm-success);
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-help-pill-row
 * @tags        help
 * @description Flex row for displaying a pill/chip and its description text.
 * @called-by   pm-modal-reminders-help.html
 * @depends-on  none
 * @updated     2026-05-05
 */
.pm-help-pill-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 0.88rem;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-help-example-block
 * @tags        help
 * @description Indented example block with a brand left-border accent.
 * @called-by   pm-modal-reminders-help.html
 * @depends-on  --pm-surface-2, --pm-brand, --pm-radius-small
 * @updated     2026-05-05
 */
.pm-help-example-block {
    background: var(--pm-surface-2);
    border-left: 3px solid var(--pm-brand);
    border-radius: var(--pm-radius-small);
    padding: 10px 12px;
    margin-top: 8px;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-help-example
 * @tags        help
 * @description Italic example text within a help example block.
 * @called-by   pm-modal-reminders-help.html
 * @depends-on  --pm-text-2
 * @updated     2026-05-05
 */
.pm-help-example {
    font-size: 0.88rem;
    color: var(--pm-text-2);
    font-style: italic;
    margin-bottom: 4px;
}

.pm-help-example:last-child {
    margin-bottom: 0;
}


/* ----------------------------------------------------------------
   HELP MODAL — CALENDAR DAY EXAMPLES
   Mini calendar day squares for colour-coded legend in help modals.
   ---------------------------------------------------------------- */

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-help-cal-day
 * @tags        themes
 * @description Styles a square day element for a calendar in a help modal, centering content with a border and specific font.
 * @called-by   pm-modal-calendar-help.html, pm-modal-important-dates-help.html
 * @depends-on  --pm-radius-xsmall, --pm-border
 * @updated     2026-05-05
 */
.pm-help-cal-day {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--pm-radius-xsmall);
    border: 1px solid var(--pm-border);
    font-size: 0.82rem;
    font-weight: 600;
    flex-shrink: 0;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-help-cal-day--green
 * @tags        themes
 * @description Applies a green color scheme to a calendar day element in a help modal, indicating a success state.
 * @called-by   pm-modal-calendar-help.html
 * @depends-on  --pm-success-light, --pm-success
 * @updated     2026-05-05
 */
.pm-help-cal-day--green {
    background: var(--pm-success-light);
    border-color: var(--pm-success);
    color: var(--pm-success);
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-help-cal-day--blue
 * @tags        themes
 * @description Applies a blue color scheme to a calendar day element in a help modal, representing an event.
 * @called-by   pm-modal-calendar-help.html
 * @depends-on  --pm-event-blue-bg, --pm-event-blue, --pm-event-blue-dark
 * @updated     2026-05-05
 */
.pm-help-cal-day--blue {
    background: var(--pm-event-blue-bg);
    border-color: var(--pm-event-blue);
    color: var(--pm-event-blue-dark);
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-help-cal-day--orange
 * @tags        themes
 * @description Applies an orange color scheme to a calendar day element in a help modal, representing an important date.
 * @called-by   pm-modal-calendar-help.html, pm-modal-important-dates-help.html
 * @depends-on  --pm-event-orange-bg, --pm-event-orange, --pm-event-orange-dark
 * @updated     2026-05-05
 */
.pm-help-cal-day--orange {
    background: var(--pm-event-orange-bg);
    border-color: var(--pm-event-orange);
    color: var(--pm-event-orange-dark);
}