/**
 * Styles for the shared ReportNarrative panels.
 * Pair with shared/js/report_narrative.js. Sits inside the existing .dual-panel card,
 * so it only styles what the renderer creates and leaves the card chrome alone.
 */

.report-apa {
    margin: 0;
    line-height: 1.65;
}

.report-headline {
    margin: 0 0 1rem;
    padding-left: 0.85rem;
    border-left: 3px solid #94a3b8;
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.5;
    color: #1e293b;
}

.report-tone-sound {
    border-left-color: #10b981;
}

.report-tone-caution {
    border-left-color: #f59e0b;
}

.report-tone-unreliable {
    border-left-color: #ef4444;
}

.report-section-title {
    margin: 1.1rem 0 0.35rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
}

.report-section-body {
    margin: 0;
    line-height: 1.65;
    color: #334155;
}

/* Variable, group and level names, so the reader can find their own columns at a glance. */
.report-section-body strong,
.report-section-list strong {
    font-weight: 650;
    color: #1e293b;
}

.report-headline strong {
    font-weight: 800;
}

.report-section-list {
    margin: 0;
    padding-left: 1.15rem;
    line-height: 1.65;
    color: #334155;
}

.report-section-list li {
    margin-bottom: 0.4rem;
}

.report-section-list li:last-child {
    margin-bottom: 0;
}

.report-copy-btn {
    margin-top: 1.1rem;
    padding: 0.35rem 0.8rem;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #f8fafc;
    color: #475569;
    font-size: 0.8rem;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.report-copy-btn:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
}

.report-copy-btn:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

@media print {
    .report-copy-btn {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .report-copy-btn {
        transition: none;
    }
}