/* Your sap tests (crop-sap-tests.html, pages/sap.js): a season's sap tests as a trend, a small chart for each
   nutrient with the new leaf solid and the old leaf dashed over the plan's stages, in words, and the
   numbers; and the form a test's numbers go in by, typed or pasted from the lab's table. */

.sap-open { padding-block: clamp(2rem, 5vw, 3.6rem) clamp(1rem, 3vw, 2rem); }
.sap-open h1 { margin: 0.2rem 0 0.6rem; text-wrap: balance; }
.sap-open .lede { max-width: 44rem; margin: 0; }
.sap-main { padding-block: 0 var(--section); }
.sap-main > .wrap { display: grid; gap: clamp(1.3rem, 3vw, 2.2rem); }
.sap-main h2 { text-wrap: balance; }
.sap-pick { max-width: 26rem; }
.sap-note h2 { margin-top: 0; }
.sap-note > :last-child { margin-bottom: 0; }

/* the season's tests at a glance */
.sap-head { display: grid; gap: 0.5rem; }
.sap-head > * { margin: 0; }
.sap-head h2 { font-size: var(--step-3); }
.sap-head__when { color: var(--ink-2); font-weight: 600; }
/* the season whole on its line, never 'the 2026–' and '27 season' a line apart */
.sap-head__season { white-space: nowrap; }
.sap-head__plan { color: var(--ink-2); max-width: 46rem; }
.sap-head__go { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.2rem; margin-top: 0.4rem; }
.sap-head__print { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.75rem; }
.sap-head__print svg { flex: none; width: 1.05rem; height: 1.05rem; color: var(--earth); }
.sap-one { display: flex; align-items: flex-start; gap: 0.45rem; margin: 0; color: var(--ink-2); font-weight: 600; }
.sap-one svg, .sap-kept svg { flex: none; width: 1.1rem; height: 1.1rem; margin-top: 0.15rem; color: var(--earth); }

/* in words */
.sap-words { display: grid; gap: 0.55rem; }
.sap-words > * { margin: 0; max-width: 46rem; }
.sap-words h2, .sap-trend h2, .sap-numbers h2, .sap-each h2 { margin: 0; font-size: var(--step-3); }
.sap-words__how { font-size: 0.9rem; color: var(--ink-3); }

/* the trend: the key, then a small chart for each nutrient (their looks: sap-chart.css) */
.sap-trend { display: grid; gap: 0.8rem; }
.sap-steve { margin: 0; max-width: 46rem; font-size: 0.92rem; color: var(--ink-2); }
.sap-ratios { display: grid; gap: 0.5rem; }
.sap-ratios > * { margin: 0; max-width: 46rem; }
.sap-ratios h2 { margin: 0; font-size: var(--step-3); }
.sap-ratios__when { color: var(--ink-2); font-weight: 600; }
.sap-ratios ul { display: grid; gap: 0.35rem; padding-left: 1.1rem; }
.sap-ratios__his { color: var(--ink-2); }

/* the numbers: a test to a column, the old leaf under the new */
.sap-numbers { display: grid; gap: 0.5rem; }
.sap-numbers__key { margin: 0; font-size: 0.9rem; color: var(--ink-3); }
.sap-table-wrap { overflow-x: auto; border: 1.5px solid var(--ink); border-radius: 12px; background: var(--paper); }
.sap-table { border-collapse: collapse; width: 100%; font-size: 0.92rem; font-variant-numeric: tabular-nums; }
.sap-table th, .sap-table td { padding: 0.5rem 0.75rem; text-align: right; border-bottom: 1px solid rgba(30, 43, 34, 0.12); white-space: nowrap; }
.sap-table thead th { font-size: 0.82rem; vertical-align: bottom; }
.sap-table thead th span, .sap-table tbody th span { display: block; font-size: 0.76rem; font-weight: 600; color: var(--ink-3); }
.sap-table tbody th span { display: inline; }
.sap-table th:first-child { text-align: left; position: sticky; left: 0; background: var(--paper); }
.sap-table tbody tr:last-child > * { border-bottom: 0; }
.sap-table__old { display: block; color: var(--earth); font-size: 0.86rem; }
.sap-table__unit { font-size: 0.72rem; color: var(--ink-3); }
.sap-table .is-none { color: var(--ink-3); }

/* each test */
.sap-each { display: grid; gap: 0.6rem; }
.sap-tests { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.2rem; }
.sap-test { padding: 0.7rem 0; border-top: 1px dashed rgba(30, 43, 34, 0.24); display: grid; gap: 0.25rem; }
.sap-test > * { margin: 0; }
.sap-test__note { color: var(--ink-2); font-size: 0.94rem; }
.sap-test__go { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 1.2rem; font-size: 0.92rem; }
.sap-test__go > span { font-weight: 700; }

/* where to from here */
.sap-go { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem 1.2rem; }
.sap-go .walk-link { display: inline-flex; align-items: center; gap: 0.4rem; }
.sap-go .walk-link svg { flex: none; width: 1.05rem; height: 1.05rem; color: var(--earth); }
/* on a touch screen each link in a test's row and in the foot is 44 px high to tap, as the walks' are
   (walk.css); a row that wraps keeps its lines touching, so no two taps overlap (qag-10asg) */
@media (pointer: coarse) {
  .sap-test__go { row-gap: 0; }
  .sap-test__go .walk-link, .sap-go .walk-link { display: inline-flex; align-items: center; min-height: 44px; }
}
.sap-kept { display: flex; align-items: flex-start; gap: 0.45rem; margin: 0; font-size: 0.9rem; color: var(--ink-3); }

/* putting a test in */
.sap-form { display: grid; gap: 0.9rem; }
.sap-form > * { margin: 0; }
.sap-form h2 { font-size: var(--step-2); }
.sap-form h2:focus { outline: none; }
.sap-form__lede { color: var(--ink-2); }
.sap-form__when { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.8rem 1.6rem; }
.sap-leaves { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; }
.sap-leaves legend { padding: 0; margin-bottom: 0.3rem; font-size: 0.86rem; font-weight: 800; }
.sap-leaves label { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 600; }
.sap-paste { border: 1.5px dashed rgba(30, 43, 34, 0.35); border-radius: 12px; padding: 0.6rem 0.9rem; }
.sap-paste summary { cursor: pointer; font-weight: 700; }
.sap-paste__body { display: grid; gap: 0.7rem; margin-top: 0.7rem; }
.sap-paste__body > * { margin: 0; }
.sap-paste textarea { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9rem; }
.sap-paste__said:empty { display: none; }
.sap-paste__said { font-weight: 600; color: var(--ink-2); }
.sap-in-wrap { overflow-x: auto; }
.sap-in { border-collapse: collapse; width: 100%; max-width: 34rem; }
.sap-in th, .sap-in td { padding: 0.28rem 0.4rem 0.28rem 0; text-align: left; }
.sap-in thead th { font-size: 0.82rem; }
.sap-in tbody th { font-weight: 600; font-size: 0.95rem; white-space: nowrap; }
.sap-in input { width: 5.5rem; padding: 0.38rem 0.5rem; border: 1.5px solid var(--ink); border-radius: 8px; background: var(--paper); font: inherit; font-variant-numeric: tabular-nums; }
.sap-in input[aria-invalid="true"] { border-color: var(--earth); box-shadow: 0 0 0 2px rgba(160, 63, 36, 0.25); }
.sap-in select { padding: 0.36rem 0.3rem; border: 1.5px solid var(--ink); border-radius: 8px; background: var(--paper); font: inherit; font-size: 0.88rem; }
.sap-in[data-leaves="new"] .sap-in__old, .sap-in[data-leaves="old"] .sap-in__new { display: none; }
.sap-form__bad { font-weight: 700; color: var(--earth); }
.sap-form__go { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem; }

/* the numbers typed in, when the lab's file isn't (its file and what was read are lab.css's) */
.sap-hand[hidden] { display: none; }
.sap-hand { display: grid; gap: 0.9rem; }
.sap-hand > * { margin: 0; }
.sap-hand__title { font-size: 1.1rem; }
[data-sap-more] { display: inline-flex; align-items: center; gap: 0.35rem; }
[data-sap-more] svg { flex: none; width: 0.95rem; height: 0.95rem; }

@media (max-width: 420px) {
  .sap-in input { width: 4.4rem; }
  .sap-in tbody th { white-space: normal; font-size: 0.88rem; }
}