/* Spectrum plots drawn by js/db/plot.js, on the database page and in the
   learn guides. Plots sit on a white panel in both themes, so these colours
   are fixed rather than theme tokens. */

.plot-axis {
    stroke: #4a5766;
    stroke-width: 1;
}

.plot-text {
    fill: #4a5766;
    font-size: 12px;
    font-family: "Source Sans 3", system-ui, sans-serif;
}

.plot-site {
    fill: none;
    stroke: #8393a3;
    stroke-width: 1.2;
}

.plot-site-selected {
    stroke: #b4540a;
    stroke-width: 1.6;
    stroke-dasharray: 5 3;
}

.plot-sum {
    fill: none;
    stroke: #215f9a;
    stroke-width: 1.8;
}

/* Little line keys in the caption */
.key::before {
    content: "";
    display: inline-block;
    width: 1.25em;
    height: 3px;
    margin-right: 0.3em;
    vertical-align: middle;
    border-radius: 2px;
}

.key-sum::before { background: #215f9a; }
.key-site::before { background: repeating-linear-gradient(90deg, #b4540a 0 5px, transparent 5px 8px); }

.plot-reference {
    fill: none;
    stroke: #4a5766;
    stroke-width: 1.4;
    stroke-dasharray: 2 3;
}

.key-reference::before { background: repeating-linear-gradient(90deg, #4a5766 0 2px, transparent 2px 5px); }

/* The plot scales down on phones, so draw its labels larger */
@media (max-width: 600px) {
    .plot-text {
        font-size: 18px;
    }
}

.plot-marker {
    stroke: #b4540a;
    stroke-width: 2;
}

.plot-marker {
    stroke: #b4540a;
    stroke-width: 2;
}

/* Blocking temperature profile (learn guide on temperature) */
.plot-point {
    fill: #b4540a;
}