/* A nutrient's sap across the season (sap-chart.js): the chart on Your sap tests (crop-sap-tests.html), and
   the same chart on a sap test's printout (crop-test-report.html). Its key, the grid of charts, and each
   chart: new leaf beside old, the crop's stages behind, Steve's target where he's given one. */
.sap-key { display: flex; flex-wrap: wrap; gap: 0.3rem 1.3rem; margin: 0; font-size: 0.88rem; font-weight: 700; color: var(--ink-2); }
.sap-key span { display: inline-flex; align-items: center; gap: 0.45rem; }
.sap-key span::before { content: ""; width: 1.6rem; height: 0; border-top: 2.5px solid var(--canopy); }
.sap-key__old::before { border-top-style: dashed !important; border-top-color: var(--earth) !important; }
.sap-key__sap::before { border-top: 4px solid var(--wattle-2) !important; }
.sap-key__today::before { width: 0 !important; height: 1.1rem; border-top: 0 !important; border-left: 2px dashed var(--ink-2); }
.sap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr)); gap: 1rem; }
.sap-chart { margin: 0; display: grid; gap: 0.35rem; align-content: start; padding: 0.9rem 0.9rem 0.8rem; }
.sap-chart__head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; }
.sap-chart__head :is(h3, h4) { margin: 0; font-size: 1.05rem; }
.sap-chart__head a { color: inherit; }
.sap-chart__unit { font-size: 0.8rem; font-weight: 700; color: var(--ink-3); }
.sap-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.sap-chart__band { fill-opacity: 0.2; }
.sap-chart__sap { fill: var(--wattle-2); }
.sap-chart__stage { font-size: 10px; font-weight: 700; fill: var(--ink-3); }
.sap-chart__grid { stroke: rgba(30, 43, 34, 0.14); stroke-width: 1; }
.sap-chart__tick { font-size: 10px; fill: var(--ink-3); text-anchor: end; font-variant-numeric: tabular-nums; }
.sap-chart__month { font-size: 10px; fill: var(--ink-3); text-anchor: start; }
/* on a phone the drawing's a little under its own size: its scale's numbers and months a size up, so
   they're 10.5 to 12 px there (its stage names stay, as each is drawn only where it fits) */
@media (max-width: 760px) { .sap-chart__tick, .sap-chart__month { font-size: 12.5px; } }
.sap-chart__today { stroke: var(--ink-3); stroke-width: 1.2; stroke-dasharray: 3 3; }
.sap-chart__line { fill: none; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.sap-chart__line--new { stroke: var(--canopy); }
.sap-chart__line--old { stroke: var(--earth); stroke-dasharray: 5 4; stroke-width: 2; }
.sap-chart__dot--new { fill: var(--canopy); }
.sap-chart__dot--old { fill: var(--paper); stroke: var(--earth); stroke-width: 1.6; }
/* Steve's target, on an avocado block: a hatched band with dashed edges, under the lines */
.sap-chart__hatch { stroke: var(--canopy); stroke-opacity: 0.42; stroke-width: 1.4; }
.sap-chart__steve-edge { stroke: var(--canopy); stroke-width: 1.3; stroke-dasharray: 3 3; }
.sap-chart__steve-said { margin: 0; font-size: 0.84rem; color: var(--ink-2); }
.sap-key__steve::before { height: 0.75rem !important; border-top: 1.3px dashed var(--canopy) !important; border-bottom: 1.3px dashed var(--canopy); background: repeating-linear-gradient(-45deg, rgba(31, 77, 46, 0.42) 0 1.4px, transparent 1.4px 4.2px); }
.sap-chart__now { display: flex; flex-wrap: wrap; gap: 0.2rem 1rem; margin: 0; font-size: 0.88rem; color: var(--ink-2); }
.sap-shift__leaf { font-weight: 700; }
.sap-shift strong { font-variant-numeric: tabular-nums; color: var(--ink); }
.sap-shift.is-falling strong { color: var(--earth); }
.sap-shift.is-rising strong { color: var(--canopy); }