/* race_predictions.css: Charts for the race-prediction articles */
.ground {
    fill: var(--green);
    fill-opacity: 0.35;
    stroke: var(--green);
    stroke-width: 1.5px;
}

.checkpoint {
    stroke: var(--slate);
    stroke-dasharray: 3 3;
}

.checkpoint-name,
.row-name {
    font-size: 0.8rem;
    fill: var(--slate);
}

/* Legends sit under their charts */
.chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
    margin: -0.5rem 0 1rem;
    font-size: 0.8rem;
    color: var(--slate);
}

.chart-legend-entry {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.swatch {
    display: inline-block;
    width: 0.8rem;
    height: 0.8rem;
}

.swatch.circle {
    border-radius: 50%;
    border: 1px solid #fff;
}

.swatch.actual { background: var(--dark); }
.swatch.naive { background: var(--orange); }
.swatch.model { background: var(--blue); }
.swatch.regression { background: var(--green); }
.swatch.perLeg { background: var(--yellow); }
.swatch.square { opacity: 0.85; }

.stem {
    stroke: var(--slate);
    stroke-opacity: 0.5;
    stroke-width: 1px;
}

.dot {
    stroke: #fff;
    stroke-width: 1.5px;
}

.dot.actual {
    fill: var(--dark);
}

.dot.naive {
    fill: var(--orange);
}

.dot.model {
    fill: var(--blue);
}

.dot.regression {
    fill: var(--green);
}

.dot.perLeg {
    fill: var(--yellow);
}

/* Box plots in the error chart, each method in its own colour throughout */
.row-rule {
    stroke: var(--slate);
    stroke-opacity: 0.6;
}

/* On time */
.zero {
    stroke: var(--slate);
    stroke-opacity: 0.4;
    stroke-dasharray: 3 3;
}

.box .whisker {
    stroke-width: 1.5px;
}

.box .quartiles {
    fill-opacity: 0.85;
}

.box .median {
    stroke: #fff;
    stroke-width: 2px;
}

.box.naive .whisker { stroke: var(--orange); }
.box.model .whisker { stroke: var(--blue); }
.box.regression .whisker { stroke: var(--green); }
.box.perLeg .whisker { stroke: var(--yellow); }
.box .outlier {
    fill-opacity: 0.5;
}

.box.naive .quartiles, .box.naive .outlier { fill: var(--orange); }
.box.model .quartiles, .box.model .outlier { fill: var(--blue); }
.box.regression .quartiles, .box.regression .outlier { fill: var(--green); }
.box.perLeg .quartiles, .box.perLeg .outlier { fill: var(--yellow); }

.axis-title {
    font-size: 0.8rem;
    fill: var(--slate);
}

/* Colour key in the text */
.key-naive,
.key-model,
.key-regression,
.key-perleg,
.key-actual {
    font-weight: 500;
}

.key-perleg {
    color: #c99400;
}

.key-regression {
    color: var(--green);
}

.key-naive {
    color: var(--orange);
}

.key-model {
    color: var(--blue);
}

.key-actual {
    color: var(--dark);
}

button {
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--slate);
    border-radius: 0.25rem;
    background: var(--blue);
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
}