/* Water in plants: equation, calculators, charts (single series: green line,
   cyan mark for "your value", recessive grid, as in the sowing chart). */
.pw-toc { margin: 4px 0 2px; }
.pw-eq { font-size: 1.35rem; font-weight: 650; text-align: center; margin: 6px 0 12px; letter-spacing: 0.01em; }
.pw-eq sub { font-size: 0.6em; }
.facts dt sub { font-size: 0.75em; }
.pw-conv { margin-top: 12px; }
.pw-units { font-variant-numeric: tabular-nums; margin: 6px 0 0; }
.pw-out { margin: 10px 0; }
.pw-out p { margin: 0 0 6px; }
.pw-big { font-size: 1.6rem; }
.pw-path-cols { margin-top: 6px; }
#pw-own[hidden] { display: none; }
.pw-steps { margin: 6px 0 12px; padding-left: 1.3em; display: grid; gap: 6px; }
.pw-fig { display: flex; align-items: center; }
.pw-cellfig { margin: 0; width: 100%; }
.pw-cellfig svg { width: 100%; height: auto; display: block; max-width: 460px; }
.pw-wall { fill: color-mix(in oklab, var(--g2) 45%, var(--surface)); stroke: var(--ink-2); stroke-width: 1.2; }
.pw-cyto { fill: color-mix(in oklab, var(--green) 12%, var(--surface)); stroke: var(--ink-2); stroke-width: 0.8; }
.pw-vac { fill: var(--cyan-wash); stroke: var(--cyan-strong); stroke-width: 1.4; }
.pw-arrow { stroke: var(--ink); stroke-width: 1.6; fill: none; }
.pw-ah { fill: var(--ink); }

.pw-chart { position: relative; }
.pw-chart svg { width: 100%; height: auto; display: block; touch-action: pan-y; }
.pw-grid { stroke: var(--hairline); stroke-width: 1; }
.pw-tick { font-size: 10px; fill: var(--ink-2); font-variant-numeric: tabular-nums; }
.pw-lbl { font-size: 11px; fill: var(--ink); }
.pw-val { font-size: 11px; fill: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; }
.pw-line { fill: none; stroke: var(--green); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.pw-pt { fill: var(--green); stroke: var(--surface); stroke-width: 2; }
.pw-hit { fill: transparent; }
.pw-pt-g { cursor: default; outline: none; }
.pw-pt-g:focus .pw-pt, .pw-pt-g:hover .pw-pt { stroke: var(--ink); }
.pw-mark { fill: var(--mark); stroke: var(--surface); stroke-width: 2.5; }
.pw-ref { stroke: var(--ink-2); stroke-width: 1; }
.pw-band { fill: color-mix(in oklab, var(--cyan) 35%, var(--surface)); }
.pw-hair { stroke: var(--ink-2); stroke-width: 1; }
.pw-hitarea { fill: transparent; }
.pw-tip {
  position: absolute; transform: translate(-50%, calc(-100% - 10px)); pointer-events: none; z-index: 3;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow);
  padding: 4px 8px; font-size: 0.82rem; display: grid; white-space: nowrap;
}
.pw-tip span { color: var(--ink-2); }
.pw-tip[hidden] { display: none; }

/* Compartments */
.pw-cmp-cols { margin-top: 6px; }
.pw-cmp-cards { display: grid; gap: 10px; }
.pw-cmp-card { border: 1px solid var(--hairline); border-radius: 10px; padding: 10px 12px; }
.pw-cmp-card h3 { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin-bottom: 4px; }
.pw-cmp-card p { font-size: 0.92rem; margin: 0; }
.pw-cmp-card p.hint { margin-top: 4px; }
.pw-dom { font-size: 0.8rem; font-weight: 600; color: var(--ink-2); background: var(--surface-2); border-radius: 999px; padding: 1px 9px; }
.pw-cmpfig { margin: 0; position: sticky; top: calc(var(--tabs-h) + 12px); }
.pw-cmpfig svg { width: 100%; height: auto; display: block; }
.pw-xyl { fill: var(--cyan-wash); stroke: var(--an-xylem, #2a78d6); stroke-width: 1; }
.pw-pd { stroke: var(--ink); stroke-width: 3; }
.pw-path-apo { fill: none; stroke: var(--clay); stroke-width: 2.2; stroke-dasharray: 6 3; }
.pw-path-sym { fill: none; stroke: var(--green); stroke-width: 2.2; }
.pw-path-tm { fill: none; stroke: var(--cyan-strong); stroke-width: 2.2; stroke-dasharray: 2 3; stroke-linecap: round; }
.pw-ah-apo { fill: var(--clay); } .pw-ah-sym { fill: var(--green); } .pw-ah-tm { fill: var(--cyan-strong); }
.pw-lbl-sm { font-size: 10px; fill: var(--ink-2); }
.pw-lead { stroke: var(--ink-2); stroke-width: 0.8; fill: none; }
.pw-dot { fill: var(--ink-2); }
svg a text { text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--ink) 35%, transparent); }
svg a:hover text, svg a:focus text { fill: var(--green-ink); }
.pw-table-wrap { overflow-x: auto; }
.pw-cmp-table { margin-top: 6px; }
.pw-cmp-table td.v, .pw-cmp-table th.v { text-align: right; }
@media (max-width: 880px) { .pw-cmpfig { position: static; } }
.pw-cmp-table td.pw-pm small { display: block; color: var(--ink-2); font-size: 0.75rem; white-space: normal; }
.pw-cmpfig .pw-lbl { font-size: 13px; }
.pw-cmpfig .pw-lbl-sm { font-size: 11.5px; }
@media (max-width: 560px) { .pw-cmp-table { font-size: 0.82rem; } .pw-cmp-table th, .pw-cmp-table td { padding: 5px 3px; } }