/* edet-reports.css — manuscript reports overlay (rendered into #dr-overlay).
   All colors/motion reference site.css :root tokens. */

/* scope selector (Whole project / Current chapter / Current scene) — a segmented
   pill matching the Stats|Analysis switch and the category tab bar. Was bare text
   buttons whose active state was an untidy highlight hugging the text (the
   .dr-viewtoggle-btn padding only applies inside .dr-view-toggle, not here). */
.dr-rep-scope {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 2px;
    background: var(--bg-raised);
    border: 1px solid var(--rule);
    border-radius: 8px;
}
.dr-rep-scope .dr-viewtoggle-btn {
    height: 28px;
    padding: 0 0.7rem;
    border-radius: 6px;
    font-size: var(--text-xs);
    white-space: nowrap;
}
.dr-rep-loading,
.dr-rep-empty {
    color: var(--fg-muted);
    padding: 1rem 0;
}

.dr-rep {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

/* uniform KPI grid — auto-FILL (not auto-fit) keeps every card the same width
   whether a row holds 6 cards or 3, so groups don't render at different sizes. */
.dr-rep-stats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.6rem;
}
.dr-rep-stat {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 4.4rem;
    background: var(--bg-raised);
    border: 1px solid var(--rule);
    border-radius: var(--radius, 8px);
    padding: 0.7rem 0.85rem;
}
.dr-rep-stat-val {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--accent);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.dr-rep-stat-label {
    font-size: var(--text-xs);
    color: var(--fg-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.3rem;
}
.dr-rep-stat-sub {
    font-size: var(--text-xs);
    color: var(--fg-dim);
    margin-top: 0.1rem;
}

.dr-rep-section {
    background: var(--bg-raised);
    border: 1px solid var(--rule);
    border-radius: var(--radius, 8px);
    padding: 0.85rem 1rem 1rem;
}
.dr-rep-section h3 {
    margin: 0 0 0.2rem;
    font-size: var(--text-base);
    color: var(--fg);
}
.dr-rep-note {
    margin: 0 0 0.7rem;
    font-size: var(--text-xs);
    color: var(--fg-dim);
}
.dr-rep-kpi {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--accent);
    margin: 0 0 0.5rem;
}

/* horizontal bar lists (overused words, adverbs, mentions) */
.dr-rep-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.dr-rep-bars li { display: grid; grid-template-columns: minmax(6rem, 9rem) 1fr 2.5rem; align-items: center; gap: 0.5rem; }
.dr-rep-bar-label { font-size: var(--text-sm); color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-rep-bar { background: var(--bg); border-radius: 999px; height: 8px; overflow: hidden; }
.dr-rep-bar-fill { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.dr-rep-bar-n { font-size: var(--text-sm); color: var(--fg-muted); text-align: right; font-variant-numeric: tabular-nums; }

.dr-rep-examples { margin: 0; padding-left: 1.1rem; color: var(--fg-muted); font-size: var(--text-sm); display: grid; gap: 0.2rem; }
.dr-rep-examples li { font-style: italic; }

.dr-rep-row { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.dr-rep-rowitem { display: flex; flex-direction: column; }
.dr-rep-rowk { font-size: var(--text-xs); color: var(--fg-dim); }
.dr-rep-rowv { font-size: var(--text-lg); color: var(--fg); font-weight: 600; }

/* pacing sparkline */
.dr-rep-spark { display: flex; align-items: flex-end; gap: 2px; height: 64px; }
.dr-rep-spark-bar { flex: 1 1 auto; min-width: 2px; background: var(--accent); opacity: 0.8; border-radius: 1px 1px 0 0; }