/**
 * RSite — Font Preview  v2.0
 * Depends on: base.css, settings-panel.css
 *
 * In-panel typography preview — embedded in settings panel profile widget.
 * Overlays the stats/news tiles when font or size changes.
 */

/* Container — absolute overlay inside .settings-profile__right */

.font-preview {
    position: absolute;
    inset: 0;
    border-radius: 8px;
    background: var(--surface-overlay-light);
    border: 1px solid var(--border-subtle);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0s 0.35s;
}

.font-preview.is-visible {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.35s ease 0.05s, visibility 0s 0s;
}

/* Content — sample text with reader typography vars */

.font-preview__content {
    padding: 8px 12px;
    /* Inherit reader typography vars for live preview */
    font-family: var(--reader-font-family, var(--font-body));
    font-size: var(--reader-font-size, 1.05em);
    line-height: var(--reader-line-height, 1.85);
    letter-spacing: var(--reader-letter-spacing, 0.01em);
    word-spacing: var(--reader-word-spacing, 0em);
}

.font-preview__title {
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.4;
    margin-bottom: 4px;
}

.font-preview__body {
    color: var(--text-secondary);
    line-height: 1.6;
    font-size: 0.85em;
}

/* Responsive */

@media (max-width: 768px) {
    .font-preview__content {
        padding: 6px 10px;
        font-size: var(--reader-font-size, 15px);
    }
}