/* ================================================================
   PROJECT MEMORY — theme-clean-forms.css
   Form elements: pm-form-row, pm-form-label, pm-input,
   pm-textarea, pm-toggle.
   Depends on: theme-clean.css (tokens)
   ================================================================ */


/* ----------------------------------------------------------------
   FORM ROW
   ---------------------------------------------------------------- */

/**
 * @pm-registry
 * @prefix pm
 * @description Standard form field wrapper — label stacked above input.
 * @apps project-memory
 * @type        css-class
 * @name        pm-form-row
 * @tags        TODO
 * @called-by   pm-modal-important-date-add.html, pm-modal-note-attach.html, pm-modal-note-categories.html, pm-modal-note-edit.html, pm-modal-note-email.html, pm-modal-person-edit.html, pm-modal-place-edit.html, pm-modal-reminder-edit.html, pm-modal-voice-settings.html, pm-one-sheet.html
 * @depends-on  none
 * @updated 2026-04-13
 */
.pm-form-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/**
 * @pm-registry
 * @prefix pm
 * @description Two-column form row — splits a single row into two
 *   equal-width fields (e.g. Date + Time side by side).
 * @apps project-memory
 * @type        css-class
 * @name        pm-form-row-split
 * @tags        TODO
 * @called-by   pm-modal-important-date-add.html, pm-modal-reminder-edit.html
 * @depends-on  none
 * @updated 2026-04-13
 */
.pm-form-row-split {
    flex-direction: row;
    gap: 12px;
}

.pm-form-row-split .pm-form-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/**
 * @pm-registry
 * @prefix pm
 * @description Inline form row — label and input side by side on one line.
 *   Used for checkbox rows (e.g. Repeat / Recurring toggle).
 * @apps project-memory
 * @type        css-class
 * @name        pm-form-row-inline
 * @tags        TODO
 * @called-by   pm-modal-reminder-edit.html, pm-modal-voice-settings.html, pm-one-sheet.html
 * @depends-on  none
 * @updated 2026-04-13
 */
.pm-form-row-inline {
    flex-direction: row;
    align-items: center;
    gap: 10px;
}


/* ----------------------------------------------------------------
   FORM LABEL
   ---------------------------------------------------------------- */

/**
 * @pm-registry
 * @prefix pm
 * @description Label above or beside a form input.
 * @apps project-memory
 * @type        css-class
 * @name        pm-form-label
 * @tags        TODO
 * @called-by   pm-modal-important-date-add.html, pm-modal-note-attach.html, pm-modal-note-categories.html, pm-modal-note-edit.html, pm-modal-note-email.html, pm-modal-person-edit.html, pm-modal-place-edit.html, pm-modal-reminder-edit.html, pm-modal-voice-settings.html
 * @depends-on  --pm-text-2
 * @updated 2026-04-13
 */
.pm-form-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--pm-text-2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}


/* ----------------------------------------------------------------
   INPUT
   ---------------------------------------------------------------- */

/**
 * @pm-registry
 * @prefix pm
 * @description Standard single-line text input. Used for text, date,
 *   time, number, and select elements.
 * @apps project-memory
 * @type        css-class
 * @name        pm-input
 * @tags        TODO
 * @called-by   pm-modal-dialog.html, pm-modal-important-date-add.html, pm-modal-note-attach.html, pm-modal-note-categories.html, pm-modal-note-edit.html, pm-modal-note-email.html, pm-modal-people-categories.html, pm-modal-person-edit.html, pm-modal-place-categories.html, pm-modal-place-edit.html, pm-modal-reminder-edit.html, pm-modal-voice-settings.html, pm-panel-notes.html, pm-panel-reminders.html
 * @depends-on  --pm-radius-small, --pm-border, --pm-panel-surface, --pm-text-1
 * @updated 2026-04-13
 */
.pm-input {
    width: 100%;
    padding: 10px 14px;
    border-radius: var(--pm-radius-small);
    border: 1.5px solid var(--pm-border);
    background: var(--pm-panel-surface);
    color: var(--pm-text-1);
    font-size: 0.95rem;
    font-family: inherit;
    box-sizing: border-box;
    transition: border-color 0.15s;
    -webkit-appearance: none;
    appearance: none;
}

.pm-input:focus {
    outline: none;
    border-color: var(--pm-brand);
}

.pm-input::placeholder {
    color: var(--pm-text-3);
}


/* ----------------------------------------------------------------
   TEXTAREA
   ---------------------------------------------------------------- */

/**
 * @pm-registry
 * @prefix pm
 * @description Multi-line text input. Minimum height set so it is
 *   immediately useful. Scrolls vertically when content overflows.
 *   Resizable vertically only.
 * @apps project-memory
 * @type        css-class
 * @name        pm-textarea
 * @tags        TODO
 * @called-by   pm-modal-important-date-add.html, pm-modal-note-edit.html, pm-modal-note-email.html, pm-modal-person-edit.html, pm-modal-place-edit.html, pm-modal-reminder-edit.html
 * @depends-on  --pm-radius-small, --pm-border, --pm-panel-surface, --pm-text-1
 * @updated 2026-04-13
 */
.pm-textarea {
    width: 100%;
    min-height: 160px;
    padding: 10px 14px;
    border-radius: var(--pm-radius-small);
    border: 1.5px solid var(--pm-border);
    background: var(--pm-panel-surface);
    color: var(--pm-text-1);
    font-size: 0.95rem;
    font-family: inherit;
    line-height: 1.5;
    box-sizing: border-box;
    resize: vertical;
    overflow-y: auto;
    transition: border-color 0.15s;
}

.pm-textarea:focus {
    outline: none;
    border-color: var(--pm-brand);
}

.pm-textarea::placeholder {
    color: var(--pm-text-3);
}


/* ----------------------------------------------------------------
   TOGGLE
   On/off switch. Structure: label.pm-toggle > input[checkbox] + span.pm-toggle-slider
   ---------------------------------------------------------------- */

/**
 * @pm-registry
 * @prefix pm
 * @description iOS-style on/off toggle switch.
 *   Wrap a hidden checkbox and a span inside label.pm-toggle.
 *   Checked state fills with brand colour.
 * @apps project-memory
 * @type        css-class
 * @name        pm-toggle
 * @tags        TODO
 * @called-by   pm-modal-note-email.html, pm-modal-voice-settings.html, pm-one-sheet.html
 * @depends-on  none
 * @updated 2026-04-13
 */
.pm-toggle {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
    flex-shrink: 0;
}

.pm-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-toggle-slider
 * @tags        forms
 * @description The visible track of the on/off toggle switch. Changes background color when the associated hidden checkbox is checked.
 * @depends-on  --pm-border, --pm-radius-full, --pm-brand, pm-modal-note-email.html:47, pm-modal-voice-settings.html:37
 * @called-by  pm-modal-note-email.html, pm-modal-voice-settings.html, pm-one-sheet.html
 * @updated     2026-04-14
 */
.pm-toggle-slider {
    position: absolute;
    inset: 0;
    background: var(--pm-border);
    border-radius: var(--pm-radius-full);
    transition: background 0.2s;
    cursor: pointer;
}

.pm-toggle-slider::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    left: 3px;
    top: 3px;
    background: white;
    border-radius: 50%;
    transition: transform 0.2s;
    box-shadow: var(--pm-shadow-inset);
}

.pm-toggle input:checked + .pm-toggle-slider {
    background: var(--pm-brand);
}

.pm-toggle input:checked + .pm-toggle-slider::before {
    transform: translateX(22px);
}


/* ----------------------------------------------------------------
   SLIDER
   Base range input. Use pm-slider for any range control.
   Variants: pm-slider-voice, pm-slider-volume, etc.
   ---------------------------------------------------------------- */

/**
 * @pm-registry
 * @prefix pm
 * @description Base range slider. Full width, brand-coloured thumb.
 *   Use as-is or extend with a variant class (pm-slider-voice, etc.)
 * @apps project-memory
 * @type        css-class
 * @name        pm-slider
 * @tags        TODO
 * @called-by   pm-modal-voice-settings.html
 * @depends-on  --pm-radius-full, --pm-border
 * @updated 2026-04-13
 */
.pm-slider {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    border-radius: var(--pm-radius-full);
    background: var(--pm-border);
    outline: none;
    cursor: pointer;
}

.pm-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--pm-brand);
    box-shadow: var(--pm-shadow-inset);
    transition: background 0.15s;
}

.pm-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    background: var(--pm-brand);
    box-shadow: var(--pm-shadow-inset);
    cursor: pointer;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-form-hint
 * @tags        forms
 * @description Styles descriptive hint text within forms with a smaller font size, specific color, and appropriate spacing.
 * @called-by   pm-modal-calendar-sync.html
 * @depends-on  --pm-text-2
 * @updated     2026-05-05
 */
.pm-form-hint {
    font-size: 0.78rem;
    color: var(--pm-text-2);
    line-height: 1.5;
    margin-top: 6px;
}