/* ============================================================================
   NOTE CONTENT COMPONENT
   ============================================================================
   
   Styling for editorial notes and annotations within document text.
   Notes are visually distinct but non-interactive, rendered as muted italic text
   (no delimiters — the square brackets were removed per request).

   Features:
   - Muted gray color to differentiate from main text
   - Italic styling for visual distinction
   - Non-interactive (pointer-events: none)
   - Inline display to flow with surrounding text
   
   Use case: Editorial notes, manuscript annotations, scholarly additions
   
   ============================================================================ */

/* ============================================================================
   BASE NOTE STYLING
   ============================================================================ */

.note-content {
    color: var(--color-gray-note);      /* Muted gray text */
    font-size: 0.9em;                   /* Slightly smaller than main text */
    font-style: italic;                 /* Italicized for distinction */
    cursor: default;                    /* Show default cursor, not pointer */
    pointer-events: none;               /* Prevent all click events */
    display: inline;                    /* Keep inline with text flow */
}


/* Square brackets around notes were removed per request — notes render as plain
   muted-gray italic text with no delimiters. */


/* ============================================================================
   INTERACTION PREVENTION
   ============================================================================ */

/* Ensure note content doesn't interfere with match highlighting */
.note-content * {
    pointer-events: none;               /* Prevent clicks on any children */
}

/* Hover state to reinforce non-interactivity */
.note-content:hover {
    cursor: default;
}


/* ============================================================================
   RESPONSIVE DESIGN
   ============================================================================ */

@media (max-width: 768px) {
    .note-content {
        font-size: 0.85em;              /* Slightly smaller on mobile */
    }
}


/* ============================================================================
   PRINT STYLES
   ============================================================================ */

@media print {
    .note-content {
        color: #666;
        font-size: 0.8em;
    }
}