* { font-family: monospace; }
/* Only the left edge is pulled out, so that wide tables end at the page edge. */
table { border-spacing: .5em .1em; margin: 0 0 0 -.5em; }
/* A table that is still too wide scrolls on its own instead of the whole page. */
.wide { overflow-x: auto; }
th { text-align: right; white-space: nowrap; vertical-align: bottom; }
/* Project names may break after a hyphen; they are much wider than the counts. */
th.p { white-space: normal; }
td { text-align: right; white-space: nowrap; }
th.l, td.l { text-align: left; }
/* Deltas have their own column, left-aligned next to the right-aligned counts. */
th.d, td.d { text-align: left; }
td.msg { text-align: left; white-space: normal; }
p { max-width: 40em; }
pre { margin-left: 2em; white-space: pre-wrap; }
.warning {
    font-weight: bold; background-color: rgba(255, 0, 0, 0.3); padding: .3em; margin: .5em 0;
}
.bad { font-weight: bold; background-color: rgba(255, 0, 0, 0.3); }
.up { color: #b00000; }
.down { color: #007000; }
.fp { color: #b00000; font-weight: bold; }
.tp { color: #007000; }
.dim { color: #777777; }
.graph { width: 100%; max-width: 60em; height: 20em; }
.graph.small { height: 10em; }
/* One small chart per project; as many columns as fit. */
.small-multiples {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
    gap: 1.5em 2em; max-width: 90em;
}
#controls label { white-space: nowrap; margin-right: 1em; }
#controls p { max-width: none; line-height: 1.8; }
/* Loaded before dygraph.css, so it needs the extra class to win. */
.graph .dygraph-legend {
    width: auto; white-space: nowrap; font-size: 12px; padding: .3em .5em;
    border: 1px solid #cccccc; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
th.sortable { cursor: pointer; }
th.sortable:hover { text-decoration: underline; }
#controls label.checks { white-space: normal; margin-right: 0; }
#check-filter { width: min(36em, 100%); box-sizing: border-box; }
/* Charts waiting for the times of the filtered checks. */
.loading { opacity: .4; }
.hint { display: block; max-width: 60em; }
.mode { white-space: nowrap; margin-left: 1em; }
/* A short stroke of a line's color, keying it in legends and tooltips. */
.key { display: inline-block; width: 1.2em; height: 2px; vertical-align: middle; margin-right: .4em; }
.legend { max-width: 60em; line-height: 1.8; }
.legend span.item { white-space: nowrap; margin-right: 1.5em; }