/* app/assets/stylesheets/components/note.css */
@layer components {
    .note {
        position: relative;
        border: var(--border-thickness-base) solid var(--color-border);
        border-radius: var(--radius-md);
        padding: 12px 12px 36px; /* room for toolbar/edit button */
        background: var(--color-background-surface);
        transition: background-color 160ms ease, border-color 160ms ease, opacity 160ms ease;
    }

    .note__display,
    .note__editor {
        white-space: pre-wrap; /* preserve newlines */
        outline: none;
        min-height: 3lh; /* visible area */
    }

    .note__editor {
        display: none;
    }

    .note.is-editing .note__display,
    .note.editing .note__display {
        display: none;
    }

    .note.is-editing .note__editor,
    .note.editing .note__editor {
        display: block;
    }

    /* Make first line look like a title in both modes */
    .note__display:first-line,
    .note__editor:first-line {
        font-size: 1.25rem;
        font-weight: 600;
        line-height: 1.3;
    }

    .note__edit { /* floating E button */
        position: absolute;
        right: 8px;
        bottom: 8px;
        width: 28px;
        height: 28px;
        border-radius: 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--color-state-disabled, #f3f3f3); /* muted color */
        border: var(--border-thickness-base) solid var(--color-border);
        cursor: pointer;
    }

    .note.is-editing .note__edit {
        display: none;
    }

    .note__toolbar {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        display: none;
        gap: 8px;
        align-items: center;
        padding: 6px 8px;
        border-top: 1px solid var(--border-color, #eee);
        background: var(--color-background-surface, #fafafa); /* surface 2 */
    }

    .note.is-editing .note__toolbar,
    .note.editing .note__toolbar {
        display: flex;
    }

    .note__toolbar .note__btn {
        all: unset;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: var(--note-btn-size);
        height: var(--note-btn-size);
        border-radius: var(--radius-full);
        box-shadow: var(--shadow-sm);
        font-weight: var(--font-weight-bold);
        line-height: 1;
    }

    .note__toolbar .note__btn:active {
        transform: translateY(1px);
    }

    .note__toolbar .note__btn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .note__toolbar .note__btn:focus-visible {
        outline: none;
        box-shadow: var(--shadow-sm),
        0 0 0 2px var(--color-background-surface),
        0 0 0 4px color-mix(in srgb, var(--color-primary) 40%, transparent);
    }

    .note__toolbar .note__save {
        background: var(--color-primary);
        color: var(--color-foreground-on-primary);
        border: var(--border-thickness-base) solid color-mix(in srgb, var(--color-primary) 80%, #0000);
        margin-left: auto; /* push to right */
    }

    .note__toolbar .note__save:hover {
        background: var(--color-primary-hover);
    }

    .note__toolbar .note__cancel {
        background: color-mix(in srgb, var(--color-border) 12%, transparent);
        color: var(--color-foreground-secondary);
        border: var(--border-thickness-base) solid var(--color-border);
    }

    .note__toolbar .note__cancel:hover {
        background: color-mix(in srgb, var(--color-border) 18%, transparent);
    }

    .note.is-editing {
        background: var(--color-background-edit);
    }

    .note.is-saving,
    .note.saving {
        background: var(--color-background-saving);
        opacity: 0.9;
    }

    .note.is-saved,
    .note.saved {
        background: var(--color-background-saved);
    }

    .note.has-error {
        background: var(--color-background-error);
        border-color: var(--color-feedback-danger);
    }

    .note.is-empty .note__display {
        color: #888;
        font-style: italic;
    }
}