Coverage page: charts and a livelier layout c987c86513df

- **Coverage reports, built in (#113).** A Flow job's artifact named `coverage` in LCOV format is read when uploaded, and the job's log says what it found. A Coverage tab shows the latest percentage and its change over a chart of every run, a strip of facts (lines covered, hits per line, functions, branches, files, badge with its Markdown), what this run changed and the files whose coverage moved, how files spread over coverage bands, a chart of covered and missed lines, the recent runs, every file with a bar, and each file's lines marked run or missed, as Coveralls does. A badge is at `/OWNER/NAME/coverage/badge.svg`, and the run page shows each job's coverage. Totals match `cargo llvm-cov`'s own.

    -- Every run of every instrumented line, added up: hits per line.

    hits             INTEGER NOT NULL DEFAULT 0,

    /// Every run of every line, added up.

    pub fn hits(&self) -> u64 {

        self.lines.values().fold(0u64, |a, n| a.saturating_add(*n))

    }

    pub hits: i64,

    /// How often an instrumented line ran, on average.

    pub fn hits_per_line(&self) -> Option<f64> {

        (self.lines_found > 0).then(|| self.hits as f64 / self.lines_found as f64)

    }

         lines_found, lines_hit, functions_found, functions_hit, branches_found, branches_hit, hits, files, dropped, created_ms) \

         VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, 'lcov', ?, ?, ?, ?, ?, ?, ?, ?, ?, ?) RETURNING id",

    .bind(kept.iter().fold(0u64, |a, f| a.saturating_add(f.hits())).min(i64::MAX as u64) as i64)

        .fetch_all(pool)

        .await

}

/// When the repository's first report on any bookmark was kept.

pub async fn first_ms(pool: &Pool, repo_id: i64) -> sqlx::Result<Option<i64>> {

    sqlx::query_scalar("SELECT MIN(created_ms) FROM coverage_reports WHERE repo_id = ?").bind(repo_id).fetch_one(pool).await

}

/// The bookmarks with reports, the most recent first.

pub async fn bookmarks(pool: &Pool, repo_id: i64) -> sqlx::Result<Vec<String>> {

    sqlx::query_scalar("SELECT bookmark FROM coverage_reports WHERE repo_id = ? GROUP BY bookmark ORDER BY MAX(created_ms) DESC")

        .bind(repo_id)

/// Reports the charts and the recent list draw on.

const HISTORY: i64 = 200;

/// Runs listed under Recent runs.

const RECENT: usize = 10;

/// Files listed as changed against the run before.

const CHANGED: usize = 12;

/// A run in the Recent runs list.

pub struct RecentRow {

    pub report: Report,

    /// Against the report before it, in percentage points.

    pub delta: Option<f64>,

}

/// A file whose coverage moved against the run before.

pub struct Moved {

    pub path: String,

    pub before: Option<f64>,

    pub after: Option<f64>,

    pub delta: f64,

}

/// One band of the file distribution.

pub struct Band {

    pub label: &'static str,

    pub class: &'static str,

    pub files: usize,

    /// Of the widest band, for the bar's width.

    pub width: f64,

}

    bookmarks: Vec<String>,

    /// The report before this one on the bookmark.

    previous: Option<Report>,

    coverage_chart: String,

    lines_chart: String,

    first_ms: Option<i64>,

    recent: Vec<RecentRow>,

    moved: Vec<Moved>,

    /// Files that are new against the run before.

    added: usize,

    bands: Vec<Band>,

    pub fn pct_of(&self, p: &Option<f64>) -> String {

        self.pct(*p)

    pub fn signed(&self, d: &f64) -> String {

        if d.abs() < 0.05 {

            "±0.0".to_string()

        } else {

            format!("{d:+.1}")

        }

    }

    pub fn delta_class(&self, d: &f64) -> &'static str {

        if *d >= 0.05 {

            "up"

        } else if *d <= -0.05 {

            "down"

        } else {

            "same"

        }

    }

    }

    pub fn hits(&self, r: &Report) -> String {

        r.hits_per_line().map(|h| if h >= 100.0 { compact(h) } else { format!("{h:.1}") }).unwrap_or_else(|| "–".into())

    }

    pub fn lines_delta(&self) -> Option<(i64, i64)> {

        let (r, p) = (self.report.as_ref()?, self.previous.as_ref()?);

        Some((r.lines_found - p.lines_found, r.lines_hit - p.lines_hit))

    }

}

/// A count, short: 9.4k, 147.7k, 2.3M.

fn compact(v: f64) -> String {

    match v {

        v if v >= 1e9 => format!("{:.1}G", v / 1e9),

        v if v >= 1e6 => format!("{:.1}M", v / 1e6),

        v if v >= 1e3 => format!("{:.1}k", v / 1e3),

        v => format!("{v:.0}"),

/// A line of values across runs, for [`chart`].

struct Series<'a> {

    values: Vec<f64>,

    class: &'a str,

    /// Shade down to these values instead of to the axis: a band.

    floor: Option<Vec<f64>>,

}

/// An SVG chart of one or more series over runs, oldest on the left, with

/// a light grid and labels, and a column per run that names it on hover

/// and links to its report. `fmt` labels the y axis.

#[allow(clippy::too_many_arguments)] // one chart, described in full by its caller

fn chart(

    label: &str,

    runs: &[&Report],

    series: &[Series],

    lo: f64,

    hi: f64,

    fmt: &dyn Fn(f64) -> String,

    url: &str,

    tip: &dyn Fn(&Report) -> String,

) -> String {

    let (w, h) = (800.0, 180.0);

    let (left, right, top, bottom) = (52.0, 10.0, 12.0, 24.0);

    let (pw, ph) = (w - left - right, h - top - bottom);

    let n = runs.len();

    if n == 0 {

    }

    let x = |i: usize| if n == 1 { left + pw / 2.0 } else { left + pw * i as f64 / (n - 1) as f64 };

    let span = if hi > lo { hi - lo } else { 1.0 };

    let y = |v: f64| top + ph * (hi - v) / span;

    let mut svg = format!(r#"<svg class="cov-chart" viewBox="0 0 {w} {h}" role="img" aria-label="{label}">"#);

    for i in 0..=4 {

        let v = lo + span * i as f64 / 4.0;

        svg.push_str(&format!(

            r#"<line class="grid" x1="{left}" x2="{x2}" y1="{yy:.1}" y2="{yy:.1}"/><text class="axis" x="{tx}" y="{ty:.1}" text-anchor="end">{t}</text>"#,

            x2 = w - right,

            yy = y(v),

            tx = left - 6.0,

            ty = y(v) + 3.5,

            t = fmt(v),

        ));

    for s in series {

        let pts: Vec<String> = s.values.iter().enumerate().map(|(i, v)| format!("{:.1},{:.1}", x(i), y(*v))).collect();

        if n > 1 {

            let area = match &s.floor {

                Some(floor) => {

                    let back: Vec<String> = floor.iter().enumerate().rev().map(|(i, v)| format!("{:.1},{:.1}", x(i), y(*v))).collect();

                    format!("M{} L{} Z", pts.join(" L"), back.join(" L"))

                }

                None => format!("M{:.1},{:.1} L{} L{:.1},{:.1} Z", x(0), top + ph, pts.join(" L"), x(n - 1), top + ph),

            };

            svg.push_str(&format!(

                r#"<path class="area {c}" d="{area}"/><polyline class="line {c}" points="{line}"/>"#,

                c = s.class,

                line = pts.join(" ")

            ));

        }

        if let Some(last) = s.values.last() {

            svg.push_str(&format!(r#"<circle class="dot {}" cx="{:.1}" cy="{:.1}" r="4"/>"#, s.class, x(n - 1), y(*last)));

        }

    }

    // A column per run: its tip on hover, its report on a click.

    let col = if n == 1 { pw } else { pw / (n - 1) as f64 };

    for (i, r) in runs.iter().enumerate() {

            r#"<a href="{url}/coverage?report={id}"><rect class="hit" x="{rx:.1}" y="{top}" width="{col:.1}" height="{ph}"><title>{t}</title></rect></a>"#,

            rx = x(i) - col / 2.0,

            t = tip(r),

    if n > 1 {

        svg.push_str(&format!(

            r#"<text class="axis" x="{left}" y="{yb}">run #{first}</text><text class="axis" x="{xr}" y="{yb}" text-anchor="end">run #{last}</text>"#,

            yb = h - 6.0,

            xr = w - right,

            first = runs[0].run_number,

            last = runs[n - 1].run_number,

        ));

    }

    let picked = match q.report {

    let bookmark = picked.as_ref().map(|r| r.bookmark.clone()).or(q.bookmark.clone()).unwrap_or_else(|| row.default_bookmark.clone());

    let bookmarks = coverage::bookmarks(&app.db, row.id).await.map_err(e)?;

    let history = coverage::on_bookmark(&app.db, row.id, &bookmark, HISTORY).await.map_err(e)?;

    let report = picked.or_else(|| history.first().cloned());

    // The report before the one shown, on the same bookmark.

    let previous = report

        .as_ref()

        .and_then(|r| history.iter().find(|h| h.created_ms < r.created_ms || (h.created_ms == r.created_ms && h.id < r.id)).cloned());

    let delta = report.as_ref().zip(previous.as_ref()).and_then(|(r, p)| Some(r.percent()? - p.percent()?));

    // Files that moved against the run before, the largest moves first.

    let (mut moved, mut added) = (Vec::new(), 0);

    if let Some(p) = &previous {

        let before: std::collections::HashMap<String, Option<f64>> =

            coverage::files(&app.db, p.id).await.map_err(e)?.into_iter().map(|f| (f.path.clone(), f.percent())).collect();

        for f in &files {

            match before.get(&f.path) {

                None => added += 1,

                Some(b) => {

                    let d = f.percent().unwrap_or(0.0) - b.unwrap_or(0.0);

                    if d.abs() >= 0.05 {

                        moved.push(Moved { path: f.path.clone(), before: *b, after: f.percent(), delta: d });

                    }

                }

            }

        }

        moved.sort_by(|a, b| b.delta.abs().total_cmp(&a.delta.abs()).then(a.path.cmp(&b.path)));

        moved.truncate(CHANGED);

    }

    // How the files spread over coverage bands.

    let bounds: [(&str, &str, f64, f64); 5] = [

        ("100%", "cov-good", 100.0, 100.1),

        ("90 – 99%", "cov-good", 90.0, 100.0),

        ("75 – 89%", "cov-fair", 75.0, 90.0),

        ("50 – 74%", "cov-low", 50.0, 75.0),

        ("under 50%", "cov-poor", -1.0, 50.0),

    ];

    let counts: Vec<usize> =

        bounds.iter().map(|(_, _, lo, hi)| files.iter().filter(|f| f.percent().is_some_and(|p| p >= *lo && p < *hi)).count()).collect();

    let widest = counts.iter().copied().max().unwrap_or(0).max(1) as f64;

    let bands = bounds

        .iter()

        .zip(&counts)

        .map(|((label, class, _, _), n)| Band { label, class, files: *n, width: *n as f64 * 100.0 / widest })

        .collect();

    // Charts: oldest on the left.

    let oldest_first: Vec<&Report> = history.iter().rev().filter(|r| r.lines_found > 0).collect();

    let pcts: Vec<f64> = oldest_first.iter().map(|r| r.percent().unwrap_or(0.0)).collect();

    let (lo, hi) = (

        (pcts.iter().copied().fold(100.0, f64::min) - 2.0).floor().max(0.0),

        (pcts.iter().copied().fold(0.0, f64::max) + 2.0).ceil().min(100.0),

    );

    let tip = |r: &Report| {

        format!(

            "Run #{} · {} · {} of {} lines",

            r.run_number,

            r.percent().map(|p| format!("{p:.1}%")).unwrap_or_default(),

            r.lines_hit,

            r.lines_found

        )

    };

    let coverage_chart = chart(

        &format!("Coverage of {bookmark} over the last {} runs", oldest_first.len()),

        &oldest_first,

        &[Series { values: pcts, class: "cov", floor: None }],

        lo,

        hi,

        &|v| format!("{v:.0}%"),

        &repo.url,

        &tip,

    );

    let top = oldest_first.iter().map(|r| r.lines_found).max().unwrap_or(0) as f64;

    let covered: Vec<f64> = oldest_first.iter().map(|r| r.lines_hit as f64).collect();

    let lines_chart = chart(

        &format!("Relevant and covered lines of {bookmark}"),

        &oldest_first,

        &[

            Series { values: covered.clone(), class: "covered", floor: None },

            Series { values: oldest_first.iter().map(|r| r.lines_found as f64).collect(), class: "relevant", floor: Some(covered) },

        ],

        0.0,

        (top * 1.08).max(1.0),

        &compact,

        &repo.url,

        &tip,

    );

    let recent = history

        .iter()

        .enumerate()

        .take(RECENT)

        .map(|(i, r)| RecentRow { report: r.clone(), delta: history.get(i + 1).and_then(|p| Some(r.percent()? - p.percent()?)) })

        .collect();

    let first_ms = coverage::first_ms(&app.db, row.id).await.map_err(e)?;

    Ok(Page(CoveragePage {

        shell,

        repo,

        bookmark,

        bookmarks,

        report,

        previous,

        delta,

        files,

        sort: sort.into(),

        coverage_chart,

        lines_chart,

        runs: oldest_first.len(),

        first_ms,

        recent,

        moved,

        added,

        bands,

    }))

    assert!(

        page.contains(">Coverage</a>")

            && page.contains("50.0%")

            && page.contains("<strong>2</strong> of <strong>4</strong> relevant lines covered"),

        "{page}"

    );

- **Pages.** A Coverage tab, shown once a repository has a report: the bookmark's latest percentage with its change against the report before over a chart of up to 200 runs (each point names its run and opens its report), a strip of facts (lines covered, hits per line, functions, branches, files, the first report, the badge with its Markdown), this run's changes with the files whose coverage moved most, files by coverage band, a chart of covered and missed lines, the recent runs, a bookmark picker, every file with a bar (sorted by lines missed, lowest coverage, or path), and a file view with each line run or missed and how often it ran. `/OWNER/NAME/coverage/badge.svg` is a badge of the default bookmark's latest coverage. The run page shows each job's coverage beside its artifacts.

<section class="cov-hero">

  <div class="cov-hero-head">

    <div>

      <h1>Coverage</h1>

      <div class="cov-sub">{% if bookmarks.len() > 1 %}<form class="inline" method="get" action="{{ repo.url }}/coverage"><label for="cov-bm" class="mute">bookmark</label> <select id="cov-bm" name="bookmark" onchange="this.form.submit()">{% for b in bookmarks %}<option value="{{ b }}"{% if b.as_str() == bookmark.as_str() %} selected{% endif %}>{{ b }}</option>{% endfor %}</select> <noscript><button>Show</button></noscript></form>{% else %}<span class="mute">on</span> <strong>{{ bookmark }}</strong>{% endif %}

        · <a href="{{ repo.url }}/flow/{{ r.run_number }}">run #{{ r.run_number }}</a> · <time title="{{ r.created_ms|when_i }}">{{ r.created_ms|ago_i }}</time></div>

    </div>

    <div class="cov-score {{ self.class_of(r.percent()) }}">

      <div class="cov-big">{{ self.pct(r.percent()) }}</div>

      {% if let Some(d) = delta %}<div class="cov-change {{ self.delta_class(d) }}" title="Against run #{% if let Some(p) = previous %}{{ p.run_number }}{% endif %}">{{ self.signed(d) }} since the run before</div>{% else %}<div class="cov-change same">the first report here</div>{% endif %}

    </div>

  </div>

  {% if runs > 1 %}<div class="cov-hero-chart">{{ coverage_chart|safe }}</div>{% endif %}

</section>

<section class="cov-facts">

  <div><span class="k">Lines covered</span><span class="v">{{ r.lines_hit }} <small>of {{ r.lines_found }}</small></span></div>

  <div><span class="k">Hits per line</span><span class="v">{{ self.hits(r) }}</span></div>

  {% if r.functions_found > 0 %}<div><span class="k">Functions</span><span class="v">{{ self.pct(r.functions_percent()) }} <small>{{ r.functions_hit }} of {{ r.functions_found }}</small></span></div>{% endif %}

  {% if r.branches_found > 0 %}<div><span class="k">Branches</span><span class="v">{{ self.pct(r.branches_percent()) }} <small>{{ r.branches_hit }} of {{ r.branches_found }}</small></span></div>{% endif %}

  <div><span class="k">Files</span><span class="v">{{ r.files }}</span></div>

  {% if let Some(t) = first_ms %}<div><span class="k">Reporting since</span><span class="v small"><time title="{{ t|when_i }}">{{ t|ago_i }}</time></span></div>{% endif %}

  <div><span class="k">Badge</span><span class="v"><img src="{{ repo.url }}/coverage/badge.svg" alt="coverage {{ self.pct(r.percent()) }}" class="cov-badge"><button type="button" class="cov-copy" data-copy="[![coverage]({{ shell.base_url }}{{ repo.url }}/coverage/badge.svg)]({{ shell.base_url }}{{ repo.url }}/coverage)" title="Copy the Markdown for a README">copy Markdown</button></span></div>

<div class="cov-grid">

  <section class="panel cov-card">

    <h2>This run</h2>

    <ul class="cov-stats">

      <li><strong>{{ r.lines_hit }}</strong> of <strong>{{ r.lines_found }}</strong> relevant lines covered <span class="{{ self.class_of(r.percent()) }}">({{ self.pct(r.percent()) }})</span></li>

      {% if let Some((found, hit)) = self.lines_delta() %}<li>{% if *found >= 0 %}+{% endif %}{{ found }} relevant lines, {% if *hit >= 0 %}+{% endif %}{{ hit }} covered, against run #{% if let Some(p) = previous %}{{ p.run_number }}{% endif %}</li>{% endif %}

      <li><strong>{{ self.hits(r) }}</strong> hits per line</li>

      <li>Job <strong>{{ r.job }}</strong>{% if r.dropped > 0 %}; {{ r.dropped }} files the report named are not in this state and are left out{% endif %}</li>

      {% if added > 0 %}<li>{{ added }} new files</li>{% endif %}

    </ul>

    {% if !moved.is_empty() %}<h3>Coverage moved in</h3>

    <table class="cov-moved">{% for f in moved %}<tr><td><a href="{{ repo.url }}/coverage/{{ r.id }}/file/{{ f.path }}">{{ f.path }}</a></td><td class="num mute">{{ self.pct_of(f.before) }} → {{ self.pct_of(f.after) }}</td><td class="num cov-change {{ self.delta_class(&f.delta) }}">{{ self.signed(&f.delta) }}</td></tr>{% endfor %}</table>{% endif %}

  </section>

  <section class="panel cov-card">

    <h2>Files by coverage</h2>

    <div class="cov-bands">{% for b in bands %}<div class="cov-band"><span class="cov-band-lbl">{{ b.label }}</span><span class="bar {{ b.class }}"><span style="width: {{ b.width }}%"></span></span><span class="n">{{ b.files }}</span></div>{% endfor %}</div>

  </section>

</div>

{% if runs > 1 %}<section class="panel">

  <h2>Relevant lines covered <small class="mute"><span class="cov-key covered">covered</span> <span class="cov-key relevant">missed</span></small></h2>

  {{ lines_chart|safe }}

</section>{% endif %}

{% if recent.len() > 1 %}<section class="panel">

  <h2>Recent runs on {{ bookmark }}</h2>

  <div class="table"><table class="cov-runs">

  <tr><th>Run</th><th>Job</th><th>Coverage</th><th class="num">Change</th><th class="num">Lines</th><th>When</th></tr>

  {% for x in recent %}<tr{% if x.report.id == r.id %} class="on"{% endif %}>

    <td><a href="{{ repo.url }}/coverage?report={{ x.report.id }}">#{{ x.report.run_number }}</a></td>

    <td>{{ x.report.job }}</td>

    <td><span class="cov-bar {{ self.class_of(x.report.percent()) }}"><span style="width: {% if let Some(p) = x.report.percent() %}{{ p }}{% else %}0{% endif %}%"></span></span> {{ self.pct(x.report.percent()) }}</td>

    <td class="num">{% if let Some(d) = x.delta %}<span class="cov-change {{ self.delta_class(d) }}">{{ self.signed(d) }}</span>{% endif %}</td>

    <td class="num">{{ x.report.lines_hit }} / {{ x.report.lines_found }}</td>

    <td class="small"><time title="{{ x.report.created_ms|when_i }}">{{ x.report.created_ms|ago_i }}</time></td>

  </tr>{% endfor %}

  </table></div>

</section>{% endif %}

<div class="head"><h1>Coverage <small>of {{ bookmark }}</small></h1></div>

/* Coverage (#113): the theme's own colours, so it fits every look, light or dark. */

.cov-good { color: var(--ok); } .cov-fair { color: color-mix(in srgb, var(--ok) 60%, var(--warn)); } .cov-low { color: var(--warn); } .cov-poor { color: var(--bad); } .cov-none { color: var(--mute); }

.cov-hero { border: 1px solid var(--line); border-radius: 10px; background: linear-gradient(180deg, var(--soft), var(--panel)); padding: 1.1em 1.3em .4em; margin: 1em 0; overflow: hidden; }

.cov-hero-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1em; flex-wrap: wrap; }

.cov-hero h1 { margin: 0; font-size: 1.6em; letter-spacing: .01em; }

.cov-sub { margin-top: .3em; font-size: .95em; }

.cov-score { text-align: right; }

.cov-big { font-size: 3.4em; font-weight: 700; line-height: 1; letter-spacing: -.02em; }

.cov-change { font-size: .9em; font-weight: 600; }

.cov-change.up { color: var(--ok); } .cov-change.down { color: var(--bad); } .cov-change.same { color: var(--mute); font-weight: 400; }

.cov-hero-chart { margin: .4em -.6em 0; }

.cov-chart { width: 100%; height: auto; display: block; }

.cov-chart .grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 4; }

.cov-chart .axis { font-size: 11px; fill: var(--mute); }

.cov-chart .area { stroke: none; }

.cov-chart .line { fill: none; stroke-width: 2.2; stroke-linejoin: round; }

.cov-chart .area.cov { fill: color-mix(in srgb, var(--ok) 18%, transparent); } .cov-chart .line.cov, .cov-chart .dot.cov { stroke: var(--ok); fill: var(--ok); }

.cov-chart .line.cov { fill: none; }

.cov-chart .area.relevant { fill: color-mix(in srgb, var(--bad) 14%, transparent); } .cov-chart .line.relevant { stroke: var(--bad); } .cov-chart .dot.relevant { fill: var(--bad); }

.cov-chart .area.covered { fill: color-mix(in srgb, var(--ok) 30%, transparent); } .cov-chart .line.covered { stroke: var(--ok); } .cov-chart .dot.covered { fill: var(--ok); }

.cov-chart .hit { fill: transparent; } .cov-chart .hit:hover { fill: color-mix(in srgb, var(--acc) 10%, transparent); }

.cov-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5em, 1fr)); gap: .6em; margin: 0 0 1em; }

.cov-facts > div { border: 1px solid var(--line); border-radius: 8px; padding: .55em .8em; background: var(--panel); }

.cov-facts .k { display: block; font-size: .72em; text-transform: uppercase; letter-spacing: .06em; color: var(--mute); }

.cov-facts .v { display: block; font-size: 1.25em; font-weight: 600; margin-top: .15em; }

.cov-facts .v small { font-size: .7em; font-weight: 400; color: var(--mute); }

.cov-badge { vertical-align: middle; }

.cov-copy { font-size: .65em; margin-left: .4em; vertical-align: middle; }

.cov-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(20em, 1fr)); gap: 1em; align-items: start; }

.cov-card h3 { font-size: .95em; margin: 1em 0 .4em; }

.cov-stats { list-style: none; padding: 0; margin: 0; line-height: 1.8; }

.cov-moved, .cov-runs { width: 100%; }

.cov-moved td { padding: .15em .3em; } .cov-moved td.num, .cov-files td.num, .cov-files th.num, .cov-runs .num { text-align: right; white-space: nowrap; }

.cov-runs tr.on td { background: var(--soft); }

.cov-bands { display: grid; gap: .55em; margin-top: .4em; }

.cov-band { display: grid; grid-template-columns: 6.5em 1fr 2.5em; align-items: center; gap: .6em; }

.cov-band-lbl { font-size: .9em; color: var(--mute); white-space: nowrap; }

.cov-band .bar { height: .9em; background: var(--soft); border-radius: 4px; overflow: hidden; }

.cov-band .bar > span { display: block; height: 100%; background: currentColor; border-radius: 4px; min-width: 2px; }

.cov-band .n { text-align: right; font-weight: 600; }

.cov-bar { display: inline-block; width: 8em; height: .7em; background: var(--soft); border-radius: 3px; vertical-align: middle; overflow: hidden; }

.cov-key { padding: 0 .4em; border-radius: 3px; font-size: .85em; }

.cov-key.relevant { background: color-mix(in srgb, var(--bad) 18%, transparent); } .cov-key.covered { background: color-mix(in srgb, var(--ok) 22%, transparent); }

.cov-code tr.cov-hit td.t, .cov-key.cov-hit { background: color-mix(in srgb, var(--ok) 16%, transparent); }

.cov-code tr.cov-miss td.t, .cov-key.cov-miss { background: color-mix(in srgb, var(--bad) 16%, transparent); }

.cov-code td.cov-hits { text-align: right; padding: 0 .5em; color: var(--mute); font-size: .85em; white-space: nowrap; user-select: none; }