:root {
    color-scheme: light;

    /* One column for the whole page. The header bar's contents and the page body share it,
       so the title in the bar and the headings underneath it sit on the same axis. */
    --content-width: 1180px;

    --surface: #ffffff;
    --surface-sunken: #f5f5f5;
    --surface-raised: #f8f8f8;
    --text-primary: #333333;
    --text-secondary: #52514e;
    --text-muted: #898781;
    --link: #337ab7;
    --hairline: #e3e3e3;
    --gridline: #e1e0d9;
    --accent: #0a630d;

    /* Darkened from the usual status green so that it stays apart from the warning amber
       it sits next to in the health bar - the two are the classic red-green confusion pair
       and were indistinguishable for protanopia at the lighter step. */
    --sev-clean: #0a7a0a;
    --sev-info: #2a78d6;
    --sev-warning: #c98500;
    --sev-error: #d03b3b;
    /* The component totals - in the chart and on the sparkline. A count of everything we
       have is not a severity, so it is painted outside the severity colours and cannot be
       taken for one of them; green stays reserved for "clean" on both the bar and the chart. */
    --chart-total: #7c3aed;

    --code-bg: #f9f2f4;
    --code-fg: #c7254e;
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;

        --surface: #1a1a19;
        --surface-sunken: #232322;
        --surface-raised: #232322;
        --text-primary: #e6e5df;
        --text-secondary: #c3c2b7;
        --text-muted: #898781;
        --link: #6da7ec;
        --hairline: #383835;
        --gridline: #2c2c2a;

        --sev-info: #3987e5;
        --sev-error: #e34948;
        --chart-total: #9d5ce8;

        --code-bg: #2c2226;
        --code-fg: #e87ba4;
    }
}

html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust:100%;
    height:100%;
}

body {
    border-sizing: border-box;
    font-family: Cantarell,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: var(--text-primary);
    background-color: var(--surface);
    margin: 0;
    height: 93%;
}

a {
    color: var(--link);
    text-decoration: none;
    background-color: transparent;
}

.headbar {
    border-radius: 4px;
    display: block;
    border: 1px solid transparent;
    margin-bottom: 20px;
    min-height: 50px;
    position: relative;

    background-color: var(--surface-raised);
    border-color: var(--hairline);
    border-width: 0 0 1px;
    z-index: 1000;
    border-radius: 0;
    margin-bottom: 14px;
}

.headbar-inner {
    box-sizing: border-box;
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 1em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* On a phone the title and the timestamp cannot share a line - let the timestamp drop
       below it rather than squeezing both. */
    flex-wrap: wrap;
    gap: 0 15px;
}

.headbar-content {
    font-size: 18px;
    line-height: 20px;
    padding: 15px 0;
}

.headbar-content-right {
    font-size: 14px;
    line-height: 20px;
    padding: 15px 0;
}

.content {
    box-sizing: border-box;
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0em 1em 0em 1em;
}

.wrapper hr {
    border-top: none;
    border-bottom: 1px solid var(--hairline);
    margin-bottom: 1em;
}

img.fit {
    max-width: 99%;
    max-height: 99%;
}

hr {
    border-top: none;
    border-bottom: 1px solid var(--accent);
    margin-bottom: 1em;
}

footer {
    text-align: center;
    margin-top: 1em;
}

span.avoidwrap { display: inline-block; }

.backlink {
    font-size: 18px;
    color: var(--text-primary);
    text-decoration: none;
}

.infobox {
    border-color: var(--hairline);
    border-image: none;
    border-radius: 3px;
    border-style: solid;
    border-width: 1px 1px 1px 5px;
    margin: 20px 0;
    padding: 20px;
}

.infobox h2 {
    margin-bottom: 5px;
    margin-top: 0;
}

.infobox p:last-child {
    margin-bottom: 0
}

.infobox-hint {
    border-left-color: var(--sev-info);
}

.infobox-hint h2 {
    color: var(--sev-info);
}

.infobox-error {
    border-left-color: var(--sev-error);
}

.infobox-error h2 {
    color: var(--sev-error);
}

.infobox-warning {
    border-left-color: var(--sev-warning);
}

.infobox-warning h2 {
    color: var(--sev-warning);
}

/* label styles copied from Bootstrap */
.label {
    border-radius: 0.25em;
    color: #fff;
    display: inline;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    padding: 0.2em 0.6em 0.3em;
    text-align: center;
    vertical-align: baseline;
    white-space: nowrap;
}

.label-info {
    background-color: var(--sev-info);
}

.label-warning {
    background-color: var(--sev-warning);
}

.label-error {
    background-color: var(--sev-error);
}

.label-neutral {
    background-color: #777;
}

.overviewlisting a {
    color: var(--text-primary);
    text-decoration: none;
}

.overviewlisting li {
   padding: 2px 4px 2px;
}

code {
    background-color: var(--code-bg);
    border-radius: 4px;
    color: var(--code-fg);
    font-size: 90%;
    padding: 2px 4px;
}

.well{
    min-height:20px;
    padding:19px;
    margin-bottom:20px;
    background-color:var(--surface-sunken);
    border:1px solid var(--hairline);
    border-radius:4px;
    -webkit-box-shadow:
    inset 0 1px 1px rgba(0,0,0,.05);
    box-shadow:inset 0 1px 1px rgba(0,0,0,.05)
}

.well pre {
    overflow-x: auto;
}

.progress {
    background-color: var(--surface-sunken);
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
    height: 20px;
    margin-bottom: 20px;
    overflow: hidden;
}

.progress-bar {
    background-color: #337ab7;
    box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15) inset;
    color: #fff;
    float: left;
    font-size: 12px;
    height: 100%;
    line-height: 20px;
    text-align: center;
    transition: width 0.6s ease 0s;
    width: 0;
}

.progress-bar-blue {
    background-color: var(--sev-info);
}

.progress-bar-green {
    background-color: var(--sev-clean);
}

.progress-bar-yellow {
    background-color: var(--sev-warning);
}

.progress-bar-red {
    background-color: var(--sev-error);
}

.sr-only {
    border: 0 none;
    clip: rect(0px, 0px, 0px, 0px);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.permalink {
    font-size: 75%;
    color: var(--text-muted);
    line-height: 100%;
    font-weight: normal;
    text-decoration: none;
}


/* ---------------------------------------------------------------------------
 * Section health & trend display
 * ------------------------------------------------------------------------ */

.healthbar {
    display: flex;
    width: 100%;
    height: 30px;
    gap: 2px;
    border-radius: 4px;
    overflow: hidden;
    background-color: var(--surface-sunken);
}

.healthbar-segment {
    height: 100%;
    min-width: 2px;
    font-size: 11px;
    line-height: 30px;
    text-align: center;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
}

.healthbar-segment-clean {
    background-color: var(--sev-clean);
}

.healthbar-segment-warning {
    background-color: var(--sev-warning);
}

/* Rejected is the only red in the bar, so it needs nothing to set it apart. */
.healthbar-segment-rejected {
    background-color: var(--sev-error);
}


.healthbar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    color: var(--text-secondary);
}

.healthbar-legend li {
    display: flex;
    align-items: center;
    gap: 6px;
}

.healthbar-legend .swatch {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex: none;
}

.healthbar-legend .count {
    color: var(--text-primary);
    font-weight: 600;
}

/* One section at a glance: the number, where it is going, and its health. */
.stat-tiles {
    display: flex;
    flex-wrap: wrap;
    /* tiles are as tall as they need to be - one with nothing to report yet should not be
       stretched into a big empty box by its neighbours */
    align-items: flex-start;
    gap: 16px;
    margin: 0 0 1.5em;
    padding: 0;
    list-style: none;
}

.stat-tile {
    flex: 0 1 420px;
    min-width: 260px;
    position: relative;
    padding: 16px 18px;
    border: 1px solid var(--hairline);
    border-radius: 6px;
    background-color: var(--surface);
}

.stat-tile-label {
    font-size: 22px;
    margin: 0 0 6px;
}

.stat-tile-label a {
    color: var(--text-primary);
    font-weight: 600;
    text-decoration: none;
}

.stat-tile-label a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 6px;
}

.stat-tile:hover {
    border-color: var(--text-muted);
    background-color: var(--surface-sunken);
}

.stat-tile:focus-within {
    outline: 2px solid var(--link);
    outline-offset: 2px;
}

.stat-tile-figure {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.stat-tile-count {
    margin: 0 0 12px;
    font-size: 14px;
    color: var(--text-secondary);
}

.stat-tile-value {
    font-size: 17px;
    font-weight: 600;
    color: var(--text-primary);
}

.stat-tile .healthbar {
    height: 14px;
}

/* Suites that are not processed any more: still reachable, but not competing for
   attention with the ones that are. */
.suite-archived {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin: 0 0 1.5em;
    padding: 0;
    list-style: none;
}

.suite-archived a {
    display: inline-block;
    padding: 3px 10px;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    color: var(--text-secondary);
    font-size: 14px;
    text-decoration: none;
}

.suite-archived a:hover {
    border-color: var(--text-muted);
    color: var(--text-primary);
}

.sparkline {
    display: block;
    margin-left: auto;
    overflow: visible;
}

.sparkline polyline {
    fill: none;
    stroke: var(--text-muted);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sparkline circle {
    fill: var(--chart-total);
    stroke: var(--surface);
    stroke-width: 2;
}

/* ---------------------------------------------------------------------------
 * Trend charts
 * ------------------------------------------------------------------------ */

.chart-panel {
    margin: 0 0 1.5em;
}

.chart-panel h3 {
    margin: 0 0 2px;
    font-size: 15px;
    font-weight: 600;
}

.chart-panel-hint {
    margin: 0 0 8px;
    font-size: 13px;
    color: var(--text-muted);
}

.chart-fallback {
    padding: 12px 14px;
    border: 1px solid var(--hairline);
    border-radius: 4px;
    color: var(--text-secondary);
    font-size: 14px;
}

.u-legend {
    font-size: 13px;
    color: var(--text-secondary);
}

.u-legend .u-marker {
    border-radius: 2px;
}

.u-legend .u-value {
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.u-select {
    background: rgba(51, 122, 183, 0.14);
}