/* ======================================================================   ReLeaf: the Plants page
   -----------------------------------------------------------------------------
   Sits on top of page.css and borrows every colour from tokens.css. Nothing
   here is a new palette; it is the same greens and greys arranged around one
   idea: the page is a screening bench. Runs are rows in a ledger, plates are
   round or square glyphs because ours really are round or square, and state is
   carried by a stamp rather than by a coloured bar.
   ========================================================================== */

/* ------------------------------------------------------------------ SHELL -- */

/* The site measure is 68ch, tuned for pages that are mostly argument. This one
   is mostly evidence sitting beside its prose, so the column is wider and the
   frame is wider with it: at 1440 the body column lands near 1020px, which is
   about 88 characters of Inter at 17px. Long enough to stop a table wrapping,
   short enough to still track a line. */
.plant { --max: 1440px; --measure: 88ch; }

.plant .pagebody { max-width: none; }
.plant .pagebody .sec > p,
.plant .pagebody .sec > ul:not(.keyfacts),
.plant .pagebody .sec > ol,
.plant .pagebody .sec > .callout { max-width: var(--measure); }
.plant .pagebody > .status { max-width: var(--measure); }

.plant .sec + .sec { margin-top: var(--sp-8); }

/* a short standfirst under a nav-length heading: the heading names the
   section, this line makes the claim.                                        */
.stand {
  margin: -0.35rem 0 var(--sp-5);
  max-width: 78ch;
  font-size: var(--text-lede);
  line-height: 1.5;
  color: var(--gray-700);
}
.stand b { color: var(--leaf-900); font-weight: 650; }

.microlabel {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gray-450);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------- KEY FACTS -- */

.keyfacts {
  list-style: none;
  margin: var(--sp-6) 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--gray-200);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.keyfacts li { margin: 0; padding: var(--sp-4) var(--sp-4) var(--sp-5); background: var(--white); }
.keyfacts b {
  display: block;
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2.15rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--leaf-900);
  font-variant-numeric: tabular-nums;
}
.keyfacts span { display: block; margin-top: .5rem; font-size: var(--text-sm); color: var(--gray-600); line-height: 1.4; }

/* --------------------------------------------------------------- PIPELINE -- */

.rail { margin: var(--sp-6) 0; border: 1px solid var(--gray-200); border-radius: var(--radius-sm); overflow: hidden; }

.rail__strip {
  display: grid;
  gap: 1px;
  background: var(--gray-200);
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
}
.rail__btn {
  appearance: none;
  border: 0;
  border-top: 3px solid transparent;
  background: var(--gray-50);
  padding: var(--sp-4) var(--sp-3);
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--gray-600);
  display: grid;
  gap: .3rem;
  transition: background .12s ease, color .12s ease;
}
.rail__btn:hover { background: var(--leaf-50); color: var(--leaf-900); }
.rail__btn:focus-visible { outline: 2px solid var(--leaf-500); outline-offset: -3px; }
.rail__btn[aria-selected="true"] { background: var(--white); border-top-color: var(--leaf-700); color: var(--leaf-900); }
.rail__no { font-size: .625rem; font-weight: 700; letter-spacing: .16em; color: var(--gray-450); font-variant-numeric: tabular-nums; }
.rail__btn[aria-selected="true"] .rail__no { color: var(--leaf-700); }
.rail__name { font-weight: 650; line-height: 1.25; font-size: var(--text-sm); }
.rail__when { font-size: var(--text-xs); color: var(--gray-500); font-variant-numeric: tabular-nums; }

.rail__panel { padding: var(--sp-5); background: var(--white); }
/* [hidden] outranks the display:grid below, so a closed panel stays closed */
.rail__panel[hidden] { display: none; }
.rail__panel h4 { margin: 0 0 var(--sp-2); color: var(--leaf-900); }
.rail__panel p { margin: 0 0 var(--sp-3); max-width: 84ch; }
.rail__panel p:last-child { margin-bottom: 0; }
.rail__body > :first-child { margin-top: 0; }

/* one photograph per stage, all six cropped to the same 3:2 frame so the rail
   does not jump height as you move along it */
.rail__shot { margin: var(--sp-5) 0 0; }
.rail__shot img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--radius-sm); background: var(--gray-100);
}
.rail__shot figcaption {
  margin-top: var(--sp-2);
  font-size: var(--text-xs); line-height: 1.5; color: var(--gray-500);
}
.rail__shot figcaption b { color: var(--gray-700); font-weight: 650; }

@media (min-width: 860px) {
  .rail__panel { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: var(--sp-6); align-items: start; }
  .rail__shot { margin-top: 0; }
}
.rail__spec {
  margin: var(--sp-4) 0 0;
  display: grid;
  gap: .35rem var(--sp-5);
  grid-template-columns: max-content 1fr;
  font-size: var(--text-sm);
}
.rail__spec dt { color: var(--gray-500); }
.rail__spec dd { margin: 0; color: var(--gray-700); font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------------- STAMPS -- */

.stamp {
  display: inline-block;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  padding: .2em .5em;
  border: 1px solid currentColor;
  border-radius: 2px;
  white-space: nowrap;
  vertical-align: .05em;
}

/* ----------------------------------------------------------------- LEDGER -- */

.filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-5) 0 var(--sp-3); align-items: center; }
.filters__lab { font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gray-450); margin-right: var(--sp-2); }

/* below about 46rem the columns crush into single words, so the table scrolls
   inside its wrapper instead of wrapping every cell to four lines */
.ledger { width: 100%; min-width: 46rem; border-collapse: collapse; font-size: var(--text-sm); }
.ledger th, .ledger td { padding: var(--sp-3) var(--sp-3); text-align: left; vertical-align: top; border-bottom: 1px solid var(--gray-200); }
.ledger thead th {
  font-size: .625rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--gray-450); background: var(--gray-50); white-space: nowrap;
}
.ledger tbody tr:hover { background: var(--leaf-50); }
.ledger tbody tr[hidden] { display: none; }
.ledger__set { font-weight: 700; color: var(--leaf-900); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ledger__when { color: var(--gray-500); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ledger td:last-child { min-width: 15rem; }
.ledger__none { padding: var(--sp-5); text-align: center; color: var(--gray-500); font-size: var(--text-sm); }

/* plate glyph: ours are square (vertical) or round (horizontal) */
.plate { display: inline-block; width: .62em; height: .62em; border: 1.5px solid var(--leaf-500); margin-right: .4em; vertical-align: baseline; }
.plate--round { border-radius: 50%; }

/* ------------------------------------------------------------------ CHART -- */

.chart { margin: var(--sp-6) 0; }
.chart svg { display: block; width: 100%; height: auto; font-family: var(--font-body); }
.chart .ax line { stroke: var(--gray-200); stroke-width: 1; }
.chart .ax .ax--base { stroke: var(--gray-400); }
.chart .tick text, .chart .cat text { fill: var(--gray-500); font-size: 12px; }
.chart .cat text { fill: var(--gray-700); font-weight: 600; }
.chart .val text { fill: var(--gray-600); font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.chart .axtitle { fill: var(--gray-450); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
/* whiskers are one standard deviation either side of the mean; they sit above
   the bars so a short bar's whisker is still readable */
.chart .err line { stroke: var(--gray-700); stroke-width: 1.4; stroke-linecap: butt; }
.chart .bar rect { transition: opacity .12s ease; }
.chart .bar--a rect { fill: var(--gray-400); }
.chart .bar--b rect { fill: var(--leaf-700); }
.chart:hover .bar rect { opacity: .5; }
.chart .bar rect:hover { opacity: 1; }
.chart__key { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-3); font-size: var(--text-sm); color: var(--gray-600); }
.chart__key i { display: inline-block; width: .85rem; height: .85rem; margin-right: .4rem; vertical-align: -.1rem; border-radius: 2px; }

/* ----------------------------------------------------------------- MATRIX -- */

.matrix { margin: var(--sp-6) 0; }
.matrix table { width: 100%; min-width: 34rem; border-collapse: collapse; }
.matrix th, .matrix td { border: 1px solid var(--gray-200); padding: 0; }
.matrix thead th {
  padding: var(--sp-3);
  font-size: .625rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--gray-500); background: var(--gray-50); text-align: center;
}
.matrix tbody th {
  padding: var(--sp-3);
  text-align: left; font-size: var(--text-sm); color: var(--leaf-900);
  background: var(--gray-50); white-space: nowrap;
}
.matrix tbody th small { display: block; font-weight: 400; color: var(--gray-500); font-size: var(--text-xs); margin-top: .15rem; }
.cell {
  display: block; width: 100%; appearance: none; border: 0; background: var(--white);
  font: inherit; text-align: center; cursor: pointer; padding: var(--sp-3) var(--sp-2);
  color: var(--gray-500); line-height: 1.3;
  transition: background .12s ease;
}
.cell:hover { background: var(--leaf-50); }
.cell:focus-visible { outline: 2px solid var(--leaf-500); outline-offset: -2px; }
.cell[aria-pressed="true"] { background: var(--leaf-900); }
.cell[aria-pressed="true"] .stamp { color: var(--white); }
.cell[aria-pressed="true"] .cell__note { color: var(--leaf-200); }
.cell__note { display: block; margin-top: .35rem; font-size: var(--text-xs); }
.cell--none { cursor: default; color: var(--gray-300); }
.cell--none:hover { background: var(--white); }

.matrix__out {
  margin-top: -1px;
  border: 1px solid var(--gray-200);
  border-top: 3px solid var(--leaf-700);
  background: var(--white);
  padding: var(--sp-5);
}
.matrix__out h4 { margin: 0 0 var(--sp-1); color: var(--leaf-900); }
.matrix__out .microlabel { display: block; margin-bottom: var(--sp-3); }
.matrix__out p { margin: 0 0 var(--sp-3); max-width: 84ch; }
.matrix__out p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------ TREATMENT ---- */

.windows { margin: var(--sp-6) 0; display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.window {
  border: 1px solid var(--gray-200);
  border-top: 3px solid var(--leaf-500);
  border-radius: var(--radius-sm);
  padding: var(--sp-4);
  background: var(--white);
}
.window h4 { margin: 0 0 var(--sp-2); font-size: var(--text-base); color: var(--leaf-900); }
.window p { margin: 0; font-size: var(--text-sm); color: var(--gray-600); }
.window .microlabel { display: block; margin-bottom: var(--sp-2); }

/* ------------------------------------------------------------------ NOTES -- */

.aside {
  margin: var(--sp-6) 0;
  padding: var(--sp-4) var(--sp-5);
  border-left: 3px solid var(--gray-300);
  background: var(--gray-50);
  font-size: var(--text-sm);
  color: var(--gray-700);
}
.aside > :first-child { margin-top: 0; }
.aside > :last-child { margin-bottom: 0; }
.aside b { color: var(--gray-800, var(--gray-700)); }

/* a photo carried for texture, not as evidence, reads one step quieter */
.fig--plain figcaption { color: var(--gray-500); }

/* ------------------------------------------------------------------- FIX -- */
/* An editorial marker: something the team still has to settle before the wiki
   freeze. Numbered F1, F2... so the list in the status box matches. Same
   component as the Sustainability, Laws and Entrepreneurship pages.          */

.plant .fix {
  margin: var(--sp-5) 0;
  max-width: var(--measure);
  padding: var(--sp-3) var(--sp-5);
  border: 1px solid var(--gray-200);
  border-left: 3px solid var(--amber-700);
  border-radius: var(--radius-sm);
  background: var(--white);
  font-size: var(--text-sm);
  color: var(--gray-700);
}
.plant .fix > :first-child { margin-top: 0; }
.plant .fix > :last-child  { margin-bottom: 0; }
.plant .fix__label {
  display: block; margin-bottom: var(--sp-1);
  font-size: .6875rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--amber-700);
}
.plant .fix ul { margin: var(--sp-2) 0 0; padding-left: 1.2em; }
.plant .fix li + li { margin-top: var(--sp-2); }
.plant .fix code { font-family: var(--font-mono); font-size: .92em; }

/* ------------------------------------------------------------- COVERAGE -- */
/* The same table shape as the matrix, read rather than clicked: what has been
   run on which platform, including the cells nobody has run.               */

.matrix--cov td { padding: var(--sp-3) var(--sp-2); text-align: center; vertical-align: middle; }
.cov { display: block; line-height: 1.3; }
.cov + .cov { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--gray-200); }
.cov b { display: block; font-size: var(--text-sm); font-weight: 650; color: var(--leaf-900); }
.cov i { display: block; font-style: normal; font-size: var(--text-xs); color: var(--gray-500); margin-top: .15rem; }
.cov--none { font-size: var(--text-xs); color: var(--gray-400); }
.cov--open b { color: var(--slate-700); }
.cov--void b { color: var(--rust-700); }

/* ------------------------------------------------------- REFERENCE LIST -- */
/* References are section 6 here, so the heading sits outside .refs and the
   wrapper drops the rule it would otherwise draw under it.                 */
.plant .sec > .refs { margin-top: var(--sp-4); padding-top: 0; border-top: 0; }

/* ---------------------------------------------------------------- PRINT ---- */

@media print {
  .rail__panel[hidden] { display: block !important; }
  [role="tabpanel"][hidden] { display: block !important; }
  .tabset__bar { display: none !important; }
}

/* ------------------------------------------------------------- ADVISORS -- */

.people { display: grid; gap: var(--sp-5); margin: var(--sp-6) 0; grid-template-columns: 1fr; }
@media (min-width: 640px) { .people { grid-template-columns: 1fr 1fr; } }
.people .fig { margin: 0; }
.people figcaption b { display: block; margin-bottom: .15rem; }

/* ------------------------------------------------------------ PROTOTYPES -- */

.protos__title {
  display: block; margin: var(--sp-5) 0 0;
  font-size: .6875rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gray-450);
}
.protos { display: grid; gap: var(--sp-4); margin: var(--sp-6) 0; grid-template-columns: 1fr; }
@media (min-width: 700px)  { .protos { grid-template-columns: 1fr 1fr; } }
.proto {
  border: 1px solid var(--gray-200);
  border-top: 3px solid var(--gray-300);
  border-radius: var(--radius-sm);
  background: var(--white);
  overflow: hidden;
}
.proto--kept { border-top-color: var(--leaf-700); }
.proto img { display: block; width: 100%; height: auto; aspect-ratio: 20 / 9; background: var(--gray-50); }
.proto__body { padding: var(--sp-3) var(--sp-4) var(--sp-4); }
.proto__no { font-size: .625rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gray-450); }
.proto--kept .proto__no { color: var(--leaf-700); }
.proto h5 { margin: .15rem 0 var(--sp-2); font-size: var(--text-base); color: var(--leaf-900); }
.proto p { margin: 0; font-size: var(--text-sm); color: var(--gray-600); line-height: 1.5; }
.proto__score { display: block; margin-top: var(--sp-2); font-size: var(--text-sm); color: var(--gray-700); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- STORY --- */

.story { margin: var(--sp-6) 0; border-left: 2px solid var(--gray-200); padding-left: var(--sp-5); }
.story__beat { position: relative; padding-bottom: var(--sp-6); }
.story__beat:last-child { padding-bottom: 0; }
.story__beat::before {
  content: ""; position: absolute; left: calc(-1 * var(--sp-5) - 5px); top: .55rem;
  width: 8px; height: 8px; background: var(--leaf-700); border-radius: 50%;
}
.story__when { display: block; font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--leaf-700); font-variant-numeric: tabular-nums; }
.story__beat h4 { margin: .3rem 0 var(--sp-2); }
.story__beat p { margin: 0 0 var(--sp-3); max-width: 82ch; }
.story__beat p:last-child { margin-bottom: 0; }
.story__beat .fig, .story__beat .figs { margin-top: var(--sp-4); }

/* ---------------------------------------------------- SET TABLES (27 Sep) --
   The two experimental-set tables from the plant team's own draft carry a long
   purpose column. At the page's reading width seven columns crush it into one
   word per line, so the table keeps a working width and its wrapper scrolls
   sideways on a narrow screen, as the other wide tables on this page do.    */
.set-table { min-width: 56rem; }
.set-table td:nth-child(4) { min-width: 22rem; }
.set-table td:nth-child(2),
.set-table td:nth-child(3) { white-space: nowrap; }

/* ---------------------------------------------------------------- FIGURES -- */
/* One frame system for the whole page, because every image opens full size
   in the lightbox and the page itself only has to show what the figure is.
     photographs   3:2, cropped to fill
     data, wide    2:1, contained (plate grids, timelines of plates)
     data, paired  3:2, contained (charts and drawings, two to a row)
     data, strip   4:1, contained (drawn timelines)
     one photo     3:2 at a fixed 26rem, caption beside it
   Data figures are never cropped, so no axis label or plate label is lost. */

.plant .fig img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  margin: 0;
  border-radius: var(--radius-sm);
}
.plant .fig:not(.fig--plain) img {
  aspect-ratio: 2 / 1;
  object-fit: contain;
  padding: var(--sp-2);
  background: var(--white);
  border: 1px solid var(--gray-200);
}
.plant .figs .fig:not(.fig--plain) img { aspect-ratio: 3 / 2; }
.plant .fig.fig--strip img { aspect-ratio: 4 / 1; }
.plant .fig--plain img,
.plant .people .fig img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  padding: 0;
  background: var(--gray-100);
  border: 0;
}

/* captions: no rule down the side, one size, one colour */
.plant .fig figcaption {
  margin-top: var(--sp-2);
  padding-left: 0;
  border-left: 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--gray-600);
}
.plant .figs { gap: var(--sp-5); }
@media (min-width: 620px) { .plant .figs--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* a single photograph sits at a fixed size with its caption alongside */
.plant .fig--side { display: grid; gap: var(--sp-3); }
@media (min-width: 720px) {
  .plant .fig--side { grid-template-columns: 26rem minmax(0, 1fr); gap: var(--sp-5); align-items: end; }
  .plant .fig--side figcaption { margin: 0; max-width: 46ch; }
}

.rail__shot img, .proto img { cursor: zoom-in; }
.plant .proto img { object-fit: contain; background: var(--gray-50); }

/* --------------------------------------------------------------- TAB SETS -- */
/* Three kinds, one behaviour (plant.js, section 4).
     .tabset--sys   Agar / Hydroponics / Soil. The same three tabs head
                    section 1 and section 2, stay pinned under the site nav
                    while their section is on screen, and move together: pick
                    a system in one and the other follows.
     .tabset--sub   the topics inside one system, as a quieter pill row.
     .tabset--runs  experimental runs in the order they were done.
   With JavaScript off nothing is hidden: every panel is on the page, in
   order, under its own heading.                                            */

.tabset { margin: var(--sp-6) 0; }
.tabset__bar { position: relative; display: flex; overflow-x: auto; scrollbar-width: none; }
.tabset__bar::-webkit-scrollbar { display: none; }
.tabset__tab {
  appearance: none; border: 0; background: none; font: inherit; cursor: pointer;
  color: var(--gray-500); white-space: nowrap;
  transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}
.tabset__tab:focus-visible { outline: 2px solid var(--leaf-500); outline-offset: -2px; }
.tabset__ink {
  position: absolute; left: 0; bottom: 0; width: 0; height: 3px;
  background: var(--leaf-700); border-radius: 3px 3px 0 0; pointer-events: none;
  transition: transform .38s cubic-bezier(.3, .7, .2, 1), width .38s cubic-bezier(.3, .7, .2, 1);
}
.tabset__panel, .setpanel { position: relative; }
[role="tabpanel"][hidden] { display: none; }
.tabset.is-ready > [role="tabpanel"]:not([hidden]) { animation: tabset-in .32s ease both; }
@keyframes tabset-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* the panel headings are what the contents rail links to. Once the tabs
   work they would only repeat the tab label, so they step out of sight. */
.tabset__h { scroll-margin-top: calc(var(--nav-h) + 6rem); }
.tabset.is-ready > .tabset__panel > .tabset__h {
  position: absolute; top: 0; width: 1px; height: 1px; margin: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* system tabs: a segmented control in the Apple manner. A frosted track,
   three compact segments with colour icons, and a white raised pill (the
   ink) that slides under the open one. Pinned under the site nav for as
   long as its section is on screen; --sys-h is its height, measured in JS,
   so the run strips below can pin themselves underneath it.             */
.icosprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.tabset--sys { margin-top: var(--sp-6); --sys-h: 4.5rem; }
.tabset--sys > .tabset__bar {
  position: sticky; top: calc(var(--nav-h) + .5rem); z-index: 7;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .25rem;
  padding: .3rem; overflow: visible;
  background: rgb(240 240 243 / .82);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid rgb(0 0 0 / .05); border-radius: 16px;
}
.tabset--sys > .tabset__bar > .tabset__tab {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .7rem; align-items: center;
  padding: .5rem .8rem; border-radius: 12px; text-align: left; white-space: normal;
  color: var(--gray-600);
  transition: color .25s ease;
}
.tabset--sys > .tabset__bar > .tabset__tab:hover { color: var(--gray-700); }
.tabset--sys > .tabset__bar > .tabset__tab[aria-selected="true"] { color: #1d1d1f; }
.tabset--sys > .tabset__bar > .tabset__tab:focus-visible { outline: 2px solid var(--leaf-500); outline-offset: 1px; }
.tabset__icon {
  grid-row: 1 / 3; width: 2.35rem; height: 2.35rem; border-radius: 9px;
  box-shadow: 0 1px 2px rgb(0 0 0 / .1), inset 0 0 0 .5px rgb(0 0 0 / .06);
  filter: saturate(.75); opacity: .85;
  transition: filter .25s ease, opacity .25s ease, transform .25s ease;
}
.tabset__tab[aria-selected="true"] .tabset__icon { filter: none; opacity: 1; transform: scale(1.04); }
.tabset__no { display: none; }
.tabset--sys .tabset__label { align-self: end; font-size: 1.02rem; font-weight: 600; letter-spacing: -.012em; line-height: 1.2; }
.tabset__sub { align-self: start; font-size: .75rem; color: var(--gray-500); font-variant-numeric: tabular-nums; }
.tabset--sys > .tabset__bar > .tabset__ink {
  top: .3rem; bottom: .3rem; height: auto; z-index: 0;
  background: var(--white); border-radius: 12px;
  box-shadow: 0 1px 2px rgb(0 0 0 / .06), 0 3px 12px -2px rgb(0 0 0 / .12);
}
.tabset--sys > .tabset__panel { padding-top: var(--sp-5); }
.tabset--sys > .tabset__panel > .stand { margin-top: 0; }
@media (max-width: 760px) {
  .tabset--sys > .tabset__bar > .tabset__tab { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: .45rem .3rem; }
  .tabset__icon { grid-row: auto; width: 1.9rem; height: 1.9rem; margin-bottom: .2rem; }
  .tabset--sys .tabset__label { font-size: .9rem; }
  .tabset__sub { font-size: .6875rem; }
}

/* topic pills inside a system */
.tabset--sub { margin-top: var(--sp-4); }
.tabset--sub > .tabset__bar,
.tabset--runs > .runstrip {
  position: sticky; z-index: 5;
  top: calc(var(--nav-h) + var(--sys-h, 4.5rem) + 1rem);
}
.tabset--sub > .tabset__bar {
  gap: .25rem; padding: .25rem; width: fit-content; max-width: 100%;
  background: var(--gray-100); border-radius: 999px;
}
.tabset--sub > .tabset__bar > .tabset__tab {
  position: relative; z-index: 1;
  padding: .45rem 1rem; border-radius: 999px; font-size: var(--text-sm); font-weight: 550;
}
.tabset--sub > .tabset__bar > .tabset__tab:hover { color: var(--leaf-900); }
.tabset--sub > .tabset__bar > .tabset__tab[aria-selected="true"] { color: var(--leaf-900); }
.tabset--sub > .tabset__bar > .tabset__ink {
  top: .25rem; bottom: .25rem; height: auto; z-index: 0;
  background: var(--white); border-radius: 999px;
  box-shadow: 0 1px 2px rgb(0 0 0 / .08), 0 0 0 1px var(--gray-200);
}
.tabset--sub > .tabset__panel { padding-top: var(--sp-5); }
.tabset--sub > .tabset__panel > :first-child:not(.tabset__h),
.tabset--sub > .tabset__panel > .tabset__h + * { margin-top: 0; }

/* ---------------------------------------------------------- RUN STRIPS ---- */
.tabset--runs { margin-top: var(--sp-4); }
.runstrip {
  display: flex; gap: var(--sp-4); padding: .55rem .6rem .6rem;
  background: rgb(255 255 255 / .86);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid rgb(0 0 0 / .06); border-radius: 14px;
}
.runstrip__group { flex: 1 1 auto; display: flex; flex-direction: column; gap: .35rem; min-width: max-content; }
.runstrip__phase { padding-left: .15rem; font-size: .8125rem; font-weight: 650; letter-spacing: .005em; color: var(--gray-600); white-space: nowrap; }
.runstrip__tabs { display: flex; gap: .3rem; }
.runstrip__tab {
  flex: 1 1 0; min-width: 5.2rem;
  appearance: none; font: inherit; text-align: left; cursor: pointer;
  display: grid; grid-template-columns: auto 1fr; column-gap: .4rem; align-items: center;
  padding: .42rem .6rem; border: 0; border-radius: 9px; background: rgb(0 0 0 / .04);
  transition: background-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.runstrip__tab b { font-size: .8125rem; font-weight: 600; color: #1d1d1f; white-space: nowrap; }
.runstrip__tab > span:not(.visually-hidden) { grid-column: 1 / -1; font-size: .6875rem; color: var(--gray-500); white-space: nowrap; }
.runstrip__tab:hover { background: rgb(0 0 0 / .07); }
.runstrip__tab:focus-visible { outline: 2px solid var(--leaf-500); outline-offset: 2px; }
.runstrip__tab[aria-selected="true"] { background: var(--leaf-900); box-shadow: 0 4px 12px -4px rgb(20 64 43 / .5); }
.runstrip__tab[aria-selected="true"] b,
.runstrip__tab[aria-selected="true"] > span { color: var(--white); }
.runstrip__tab[aria-selected="true"] .dot { box-shadow: 0 0 0 2px var(--white); }

.dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; }
.dot--done    { background: var(--leaf-500); }
.dot--partial { background: var(--amber-700); }
.dot--void    { background: var(--rust-700); }
.dot--open    { background: var(--white); box-shadow: inset 0 0 0 2px var(--slate-700); }
.runstrip__tab[aria-selected="true"] .dot--open { box-shadow: inset 0 0 0 2px var(--slate-700), 0 0 0 2px var(--white); }

.runstrip__key { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; margin: .6rem 0 0 .2rem; padding: 0; font-size: var(--text-xs); color: var(--gray-500); }
.runstrip__key li { margin: 0; }
.runstrip__key .dot { margin-right: .4rem; vertical-align: -.02rem; }

/* ---------------------------------------------------------- SET PANELS ---- */
/* Every run opens with the same anatomy, in the same places:
   head, why the set exists, the account beside a design card, the figures,
   then what changed next and the way to the neighbouring runs.            */
.setpanel { padding-top: var(--sp-5); margin-top: var(--sp-2); scroll-margin-top: calc(var(--nav-h) + var(--sys-h, 4.5rem) + 7rem); }
.tabset__panel { scroll-margin-top: calc(var(--nav-h) + var(--sys-h, 4.5rem) + 2rem); }
.setpanel__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-4); }
.setpanel__head h4 { margin: .3rem 0 0; font-size: 1.5rem; line-height: 1.2; letter-spacing: -.015em; color: var(--leaf-900); }
.setpanel__head .stamp { margin-top: .35rem; }
.setpanel > .run__aim { margin: var(--sp-3) 0 0; max-width: 72ch; font-size: var(--text-lede); line-height: 1.55; }
.setpanel__body { display: grid; gap: var(--sp-6); margin-top: var(--sp-5); }
@media (min-width: 1000px) {
  .setpanel__body { grid-template-columns: minmax(0, 1fr) 19rem; align-items: start; }
}
.setpanel__text > :first-child { margin-top: 0; }
.setpanel__text p { max-width: 72ch; }
.setpanel__text--solo { margin-top: var(--sp-4); }
.setpanel__figs { margin-top: var(--sp-6); }
.setpanel__figs > .fig, .setpanel__figs > .figs { margin: 0 0 var(--sp-6); }
.setpanel__figs > :last-child { margin-bottom: 0; }
.setpanel > .discloses { margin-top: var(--sp-6); }

.setpanel__foot {
  margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--gray-200);
  display: grid; gap: var(--sp-4);
}
@media (min-width: 860px) { .setpanel__foot { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }
.setpanel__next { margin: 0; font-size: var(--text-sm); max-width: 70ch; }
.setpanel__nav { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }
.setnav {
  appearance: none; font: inherit; cursor: pointer; text-align: left;
  display: grid; gap: .1rem; padding: .55rem .9rem;
  border: 1px solid var(--gray-200); border-radius: var(--radius-sm); background: var(--white);
  transition: border-color .2s ease, background-color .2s ease;
}
.setnav span { font-size: .625rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gray-450); }
.setnav b { font-size: var(--text-sm); font-weight: 600; color: var(--leaf-900); }
.setnav b span { font-size: inherit; font-weight: inherit; letter-spacing: 0; text-transform: none; }
.setnav--next { text-align: right; }
.setnav:hover { border-color: var(--leaf-500); background: var(--leaf-50); }
.setnav:focus-visible { outline: 2px solid var(--leaf-500); outline-offset: 2px; }

/* the design card: what was plated, as a grid, then the spec */
.setcard {
  border: 1px solid var(--gray-200); border-radius: var(--radius-sm);
  background: var(--gray-50); padding: var(--sp-4);
}
.setcard__title { margin: 0 0 var(--sp-2); font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gray-450); }
.setcard .rail__spec { grid-template-columns: 1fr; gap: 0; margin-top: var(--sp-4); }
.setcard .rail__spec dt { margin-top: var(--sp-3); font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.setcard .rail__spec dt:first-child { margin-top: 0; }
.setcard .rail__spec dd { margin-top: .15rem; line-height: 1.45; }

.dgrid { margin: 0; overflow-x: auto; }
.dgrid__t { border-collapse: separate; border-spacing: 3px; font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.dgrid__t caption { caption-side: bottom; text-align: left; padding-top: .35rem; font-size: var(--text-xs); color: var(--gray-500); }
.dgrid__t th { padding: 0 .25rem; font-weight: 600; color: var(--gray-600); text-align: center; white-space: nowrap; }
.dgrid__t tbody th { text-align: right; }
.dgrid__axis { font-size: .75rem; font-weight: 700; letter-spacing: .01em; color: var(--gray-600) !important; padding-bottom: .2rem !important; }
.dgrid__axis--row { text-align: right !important; vertical-align: bottom; }
.setpanel__body--flush { margin-top: 0; }
.dgrid__c { width: 2.1rem; height: 1.5rem; border-radius: 3px; }
.dgrid__c--ctrl { background: var(--white); box-shadow: inset 0 0 0 1.5px var(--leaf-900); }
.dgrid__c--salt { background: var(--gray-300); }
.dgrid__c--prot { background: var(--leaf-200); }
.dgrid__c--both { background: var(--leaf-700); }
.dgrid__c--lost { background: repeating-linear-gradient(45deg, var(--rust-100), var(--rust-100) 3px, var(--rust-700) 3px, var(--rust-700) 4px); }
.dlegend { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; grid-template-columns: auto auto; justify-content: start; gap: .3rem .75rem; font-size: var(--text-xs); line-height: 1.3; color: var(--gray-600); }
.dlegend li { margin: 0; line-height: 1.3; }
.dlegend i { display: inline-block; width: .85rem; height: .65rem; margin-right: .35rem; border-radius: 2px; vertical-align: -.05rem; }

/* ------------------------------------------------------ NORMALISATION ---- */
.normfig { margin: var(--sp-6) 0; }
.norm {
  display: grid; gap: var(--sp-6);
  padding: var(--sp-5); border: 1px solid var(--gray-200); border-radius: var(--radius-sm); background: var(--white);
}
@media (min-width: 760px) { .norm { grid-template-columns: 1fr 1fr; } }
.norm__title { margin: 0 0 var(--sp-3); font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gray-450); }
.norm__bars { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.norm__bars li + li { margin-top: 0; }
.norm__row { display: grid; grid-template-columns: 7rem minmax(0, 1fr) 5.25rem; gap: .65rem; align-items: center; font-size: var(--text-sm); color: var(--gray-600); }
.norm__track { height: .85rem; background: var(--gray-100); border-radius: 2px; overflow: hidden; }
.norm__bar { display: block; height: 100%; width: var(--w); background: var(--gray-400); border-radius: 2px; }
.norm__row--hl .norm__bar { background: var(--leaf-700); }
.norm__row--hl .norm__lab { font-weight: 650; color: var(--leaf-900); }
.norm__val { text-align: right; font-variant-numeric: tabular-nums; color: var(--gray-700); }
.norm__val small { margin-left: .35rem; color: var(--gray-450); }
.normfig figcaption { margin-top: var(--sp-2); font-size: var(--text-sm); line-height: 1.5; color: var(--gray-600); }

.fixgrid > .fix { max-width: none; }

@media (prefers-reduced-motion: reduce) {
  .tabset__ink, .runstrip__tab, .tabset__tab { transition: none; }
  .tabset.is-ready > [role="tabpanel"] { animation: none !important; }
}

.runstrip__ink { margin-left: auto !important; }
.runstrip__ink b { font-weight: 650; color: var(--gray-700); }

/* --------------------------------------------------------- COMPACT RAIL --- */
/* One run, end to end: the whole thing fits one screen. Photo left at a
   fixed size, one sentence and a short spec on the right.                */
.rail--compact .rail__btn { padding: var(--sp-3) var(--sp-3); }
.rail--compact .rail__panel { padding: var(--sp-4); }
@media (min-width: 860px) {
  .rail--compact .rail__panel { grid-template-columns: 17rem minmax(0, 1fr); gap: var(--sp-5); }
}
.rail--compact .rail__shot { margin: 0; }
.rail--compact .rail__shot figcaption { margin-top: .35rem; }
.rail--compact .rail__body h4 { margin-bottom: var(--sp-1); }
.rail--compact .rail__body p { margin-bottom: var(--sp-2); }
.rail--compact .rail__spec { margin-top: var(--sp-3); }

/* ---------------------------------------------------------- FIX TOGGLES --- */
/* One toggle per section holds every open fix for it, closed by default. */
.fixfold { margin: var(--sp-7) 0 0; border: 1px solid var(--gray-200); border-radius: 14px; background: var(--white); }
.fixfold > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: .75rem;
  padding: .85rem 1.1rem; border-radius: 14px;
}
.fixfold > summary::-webkit-details-marker { display: none; }
.fixfold > summary::before {
  content: ""; width: .5rem; height: .5rem; flex: none;
  border-right: 2px solid var(--gray-450); border-bottom: 2px solid var(--gray-450);
  transform: rotate(-45deg); transition: transform .2s ease;
}
.fixfold[open] > summary::before { transform: rotate(45deg); }
.fixfold > summary:hover { background: var(--gray-50); }
.fixfold__title { font-weight: 650; color: var(--gray-700); }
.fixfold__count { margin-left: auto; padding: .15rem .55rem; border-radius: 999px; background: var(--amber-100); color: var(--amber-700); font-size: var(--text-xs); font-weight: 650; }
.fixfold__body { padding: 0 1.1rem 1.1rem; }
.fixfold__body > .fix:first-child { margin-top: 0; }

/* ------------------------------------------------------------ PHASE CARDS -- */
.phasecards { display: grid; gap: var(--sp-4); margin: 0 0 var(--sp-5); }
@media (min-width: 860px) { .phasecards { grid-template-columns: 1fr 1fr; } }
.phasecard { padding: var(--sp-4); border-radius: 14px; background: #f5f5f7; }
.phasecard__title { margin: 0 0 var(--sp-2); font-size: .875rem; font-weight: 700; letter-spacing: .005em; color: var(--leaf-700); }
.phasecard p { font-size: var(--text-sm); line-height: 1.55; margin: 0 0 var(--sp-2); }
.phasecard p:last-child { margin-bottom: 0; }

/* the one large photograph in section 2 */
.plant .fig--hero { margin: var(--sp-4) 0 var(--sp-6); }
.plant .fig--hero img { aspect-ratio: 21 / 9; border-radius: 18px; }

/* one row each, never 3 + 1 or 5 + 1 */
@media (min-width: 700px) {
  .plant .keyfacts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rail--compact .rail__strip { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.plant .keyfacts li { padding: var(--sp-3) var(--sp-4); }
.plant .keyfacts b { font-size: 1.6rem; }

/* the pinned strip stays slim: it shares the top of the screen with the system bar */
.runstrip { padding: .4rem .5rem .45rem; gap: var(--sp-3); }
.runstrip__group { gap: .2rem; }
.runstrip__phase { font-size: .6875rem; }
.runstrip__tab { padding: .3rem .55rem; min-width: 4.9rem; border-radius: 8px; }
.runstrip__tab b { font-size: .78rem; }
.runstrip__tab > span:not(.visually-hidden) { font-size: .65rem; line-height: 1.25; }

/* ======================================================= ONE ROUNDED SYSTEM ==
   Every surface on the page is one of two things: a soft grey panel
   (#f5f5f7, radius 14) or a white card with a hairline (radius 14). Tables,
   the six steps, notes, cards and folds all use them, so nothing on the
   page has a square corner or a coloured side rule.                       */
.plant { --surface: #f5f5f7; --r-lg: 14px; --r-md: 10px; }

/* tables: a rounded card, a soft header, hairlines between rows only */
.plant .tablewrap {
  border: 1px solid var(--gray-200); border-radius: var(--r-lg);
  background: var(--white); overflow-x: auto;
}
.plant .tablewrap table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--text-sm); }
.plant .tablewrap th, .plant .tablewrap td {
  padding: .7rem .9rem; text-align: left; vertical-align: top;
  border: 0; border-bottom: 1px solid var(--gray-100);
}
.plant .tablewrap thead th {
  background: var(--surface); border-bottom: 1px solid var(--gray-200);
  font-size: .75rem; font-weight: 650; letter-spacing: .01em; text-transform: none; color: var(--gray-500);
}
.plant .tablewrap tbody tr:last-child td { border-bottom: 0; }
.plant .tablewrap tbody tr:hover td { background: #fafafb; }
.plant .tablewrap td b { color: var(--leaf-900); }
.plant .tablewrap + .aside { margin-top: var(--sp-2); padding: 0; background: none; font-size: var(--text-xs); color: var(--gray-500); }

/* notes and asides: grey panels, no rule down the side */
.plant .aside { border: 0; border-left: 0; border-radius: var(--r-lg); background: var(--surface); padding: var(--sp-4) var(--sp-5); }

/* the six steps: a segmented track like the system tabs, the panel a card */
.rail.rail--compact { border: 0; border-radius: 0; overflow: visible; margin-top: var(--sp-5); }
.rail--compact .rail__strip {
  gap: .25rem; padding: .3rem; background: var(--surface); border-radius: 16px;
}
.rail--compact .rail__btn {
  border: 0; border-radius: 12px; background: transparent;
  padding: .55rem .75rem; transition: background-color .25s ease, box-shadow .25s ease, color .25s ease;
}
.rail--compact .rail__btn:hover { background: rgb(255 255 255 / .6); }
.rail--compact .rail__btn[aria-selected="true"] {
  background: var(--white); box-shadow: 0 1px 2px rgb(0 0 0 / .06), 0 3px 12px -2px rgb(0 0 0 / .12);
}
.rail--compact .rail__panel {
  margin-top: var(--sp-3); padding: var(--sp-4);
  border: 1px solid var(--gray-200); border-radius: var(--r-lg); background: var(--white);
}
@media (min-width: 860px) { .rail--compact .rail__panel { grid-template-columns: 16rem minmax(0, 1fr); align-items: center; } }
.rail--compact .rail__shot img { border-radius: var(--r-md); }

/* cards: the design card, the platform card, the three timing windows */
.setcard { border: 0; border-radius: var(--r-lg); background: var(--surface); }
.plant .window { border: 0; border-top: 0; border-radius: var(--r-lg); background: var(--surface); }
.plant .window .microlabel { color: var(--leaf-700); }
.setcard__photo { margin: 0 0 var(--sp-4) !important; }
.setcard__photo img { border-radius: var(--r-md) !important; }

/* folds */
.plant .discloses { border: 1px solid var(--gray-200); border-radius: var(--r-lg); overflow: hidden; }
.plant .disclose > summary:hover, .plant .disclose[open] > summary { background: var(--surface); }

/* figures: every frame rounded the same way */
.plant .fig img { border-radius: var(--r-lg); }
.plant .fig:not(.fig--plain) img { border-color: var(--gray-200); }

/* photo rows and prototype cards line up as equal tiles */
.plant .figs { align-items: stretch; }
.plant .proto { border: 1px solid var(--gray-200); border-top: 1px solid var(--gray-200); border-radius: var(--r-lg); }
.plant .proto--kept { border-color: var(--leaf-500); box-shadow: 0 0 0 1px var(--leaf-500); }
.plant .proto img { border-radius: var(--r-lg) var(--r-lg) 0 0; }

/* section 1 opens on the steps, so no gap above them */
#overview > .rail--compact { margin-top: var(--sp-4); }

/* the five prototype boxes: smaller tiles, three to a row */
.plant .protos { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--sp-3); margin-top: 0; }
.plant .proto__body { padding: var(--sp-3); }
.plant .proto h5 { font-size: var(--text-sm); margin: .1rem 0 .35rem; }
.plant .proto__score { margin-top: 0; font-size: var(--text-xs); font-weight: 500; color: var(--gray-600); }

/* ================================================================ NO RULES ==
   No horizontal lines anywhere on this page. Space and the grey panels do
   the separating; tables use alternating shade instead of row lines.      */
.plant .sitenav__bar { border-bottom-color: transparent; }
.plant .pagehead { border-bottom: 0; }
.plant .sec h2 { border-bottom: 0; padding-bottom: 0; }
.plant .refs, .plant .footer2, .plant .footer2__legal { border-top: 0; }
.plant .discloses > .disclose + .disclose { border-top: 0; }
.plant .setpanel__foot { border-top: 0; padding-top: 0; }
.plant .rail__btn { border-top: 0; }
.plant table.data thead th, .plant table.data td,
.plant .tablewrap th, .plant .tablewrap td { border-bottom: 0; }
.plant .tablewrap tbody tr:nth-child(even) td { background: #fafafb; }
.plant .tablewrap tbody tr:hover td { background: var(--leaf-50); }
.plant .sec + .sec { margin-top: var(--sp-8); }

/* ================================================================ 17 OCT ==
   Figures are laid out by their own shape: a row of figures shares one
   height and each takes the width its aspect ratio asks for (--ar, written
   by the build), so a 2:1 chart and a 1.8:1 plate grid sit side by side
   with nothing cropped and no letterboxing.                              */

/* one row, one height */
.plant .fxrow { display: flex; gap: var(--sp-4); align-items: flex-start; margin: var(--sp-5) 0; }
.plant .fxrow--keep { max-width: 50rem; }
.plant .fxrow > .fig { flex: var(--ar, 1) 1 0; min-width: 0; margin: 0; }
@media (max-width: 699px) {
  .plant .fxrow:not(.fxrow--keep) { flex-direction: column; }
  .plant .fxrow:not(.fxrow--keep) > .fig { flex: none; width: 100%; }
}
.plant .fig.fig--bare:not(.fig--plain) img,
.plant .fig.fig--line:not(.fig--plain) img,
.plant .fig.fig--mid:not(.fig--plain) img { aspect-ratio: auto !important; object-fit: contain; padding: 0; border: 0; background: none; border-radius: 10px; }
.plant .fig--mid { max-width: 52rem; }
.plant .fig--line { margin: var(--sp-4) 0; }
.plant .fig.fig--line:not(.fig--plain) img { padding: var(--sp-3) var(--sp-4); background: #fff; border: 1px solid var(--gray-200); }
.plant .fig { position: relative; }
.fig__label { display: block; margin: 0 0 .35rem; font-size: .75rem; font-weight: 650; letter-spacing: .02em; color: var(--gray-700); }

/* the four treatment arms of a hydroponic run */
.armrow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); margin: var(--sp-5) 0; }
@media (min-width: 760px) { .armrow { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.armrow .fig { margin: 0; }
.plant .armrow .fig.fig--bare:not(.fig--plain) img { aspect-ratio: 4 / 3 !important; object-fit: cover; border-radius: 10px; }
.plant .armrow--tall .fig.fig--bare:not(.fig--plain) img { aspect-ratio: 3 / 4 !important; }

/* the students' summary bullets at the head of a set */
.finding { margin: var(--sp-4) 0 0; padding: var(--sp-4) var(--sp-5); border-radius: 14px; background: #f0f7f2; }
.finding__t { margin: 0 0 var(--sp-2); font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--leaf-700); }
.finding ul { margin: 0; padding-left: 1.1rem; }
.finding li { margin: .2rem 0; line-height: 1.55; }

/* long legends and the run-sheet tables fold */
.legend { margin: calc(var(--sp-2) * -1) 0 var(--sp-5); }
.legend > summary { cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; font-size: var(--text-sm); font-weight: 600; color: var(--gray-600); list-style: none; }
.legend > summary::-webkit-details-marker { display: none; }
.legend > summary::before { content: ""; width: .45rem; height: .45rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .15s; }
.legend[open] > summary::before { transform: rotate(45deg); }
.legend__body { margin-top: var(--sp-3); font-size: var(--text-sm); line-height: 1.6; color: var(--gray-600); }
.legend--table { margin: var(--sp-4) 0; }
.legend--table .legend__body { color: inherit; }

.setpanel__foot--nav { grid-template-columns: 1fr !important; justify-items: end; }
.minihead { margin: var(--sp-6) 0 var(--sp-3); font-size: 1rem; font-weight: 650; color: var(--gray-900); }

/* protectant counts per stress */
.tallies { display: grid; gap: var(--sp-4); margin: var(--sp-2) 0 var(--sp-5); }
@media (min-width: 860px) { .tallies { grid-template-columns: 1fr 1fr; } }
.tally { padding: var(--sp-4) var(--sp-5); border-radius: 14px; background: #f5f5f7; }
.tally__t { margin: 0; font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--leaf-700); }
.tally__lead { margin: var(--sp-2) 0 var(--sp-3); font-size: var(--text-sm); line-height: 1.55; }
.tally ul { list-style: none; margin: 0; padding: 0; }
.tally li { display: flex; justify-content: space-between; gap: var(--sp-4); padding: .45rem 0; border-top: 1px solid rgb(0 0 0 / .06); font-size: var(--text-sm); }
.tally li b { font-weight: 600; text-align: right; }

/* application phases read down the page, each with its own timeline */
.phaselist { display: grid; gap: var(--sp-4); }
.phaselist .phasecard p { font-size: var(--text-base, 1rem); }
.phaselist .fig--line { margin: var(--sp-4) 0; }

/* soil: methods tried, in order */
.trials { list-style: none; margin: 0 0 var(--sp-4); padding: 0; display: grid; gap: var(--sp-3); }
@media (min-width: 860px) { .trials { grid-template-columns: repeat(3, minmax(0, 1fr)); } .trials--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.trial { padding: var(--sp-4); border-radius: 14px; background: #f5f5f7; }
.trial__no { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: #fff; font-size: .8rem; font-weight: 700; color: var(--leaf-700); }
.trial__what { margin: var(--sp-2) 0 0; font-size: var(--text-sm); line-height: 1.55; }
.trial__p { margin: var(--sp-2) 0 0; font-size: var(--text-sm); line-height: 1.55; color: var(--gray-600); }
.trial__p b { display: block; font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-500); }

.pours { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: var(--sp-4) 0; padding: 0; counter-reset: none; }
.pours li { display: grid; padding: .6rem .9rem; border-radius: 12px; background: #fdf1e7; min-width: 7.5rem; }
.pours li b { font-size: 1.05rem; color: #9a4a1d; }
.pours li span { font-size: .75rem; color: var(--gray-600); }
.pours li + li { position: relative; }
.pours__rep { background: #fff !important; border: 1.5px dashed #e3b48f; }

/* five photographs: two across, then three */
.plant .figs--mosaic { display: grid; gap: var(--sp-4); }
@media (min-width: 760px) {
  .plant .figs--mosaic { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .plant .figs--mosaic > .fig { grid-column: span 2; }
  .plant .figs--mosaic > .fig:nth-child(-n+2) { grid-column: span 3; }
}
.plant .fxrow > .fig:not(.fig--plain) img { aspect-ratio: auto !important; object-fit: contain; padding: 0; border: 0; background: none; border-radius: 10px; }
.plant .fxstack { margin: var(--sp-5) 0; display: grid; gap: var(--sp-4); }
.plant .fxstack > .fig { margin: 0; }
.plant .fxstack > .fig:not(.fig--plain) img { aspect-ratio: auto !important; object-fit: contain; padding: 0; border: 0; background: none; border-radius: 10px; }
.plant .fig--line { max-width: 50rem; }

/* ======================================================= 17 OCT, 3 + 4 ==
   Dry lab and outreach as short reads: three number tiles, text beside its
   picture, and one card per visit (date, who, what it changed).           */
.dtiles { list-style: none; margin: var(--sp-5) 0 var(--sp-6); padding: 0; display: grid; gap: var(--sp-3); }
@media (min-width: 760px) { .dtiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dtiles li { padding: var(--sp-4) var(--sp-5); border-radius: 16px; background: #f0f7f2; }
.dtiles b { display: block; font-size: 1.45rem; line-height: 1.15; font-weight: 700; letter-spacing: -.01em; color: var(--leaf-700); }
.dtiles span { display: block; margin-top: .35rem; font-size: var(--text-sm); line-height: 1.45; color: var(--gray-600); }

.dsplit { display: grid; gap: var(--sp-5); align-items: start; }
@media (min-width: 900px) {
  .dsplit { grid-template-columns: minmax(0, 1fr) 21rem; }
  .dsplit--fig { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); }
}
.dsplit > div > p:first-child { margin-top: 0; }
.dsplit__pics { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.dsplit__pics .fig, .dsplit .fig { margin: 0; }
.plant .dsplit__pics .fig--plain img { aspect-ratio: 3 / 4; }
.plant .fig--sketch.fig--plain img { aspect-ratio: auto; object-fit: contain; background: #fff; border: 1px solid var(--gray-200); }

.vcards { display: grid; gap: var(--sp-4); margin: var(--sp-3) 0 var(--sp-6); }
@media (min-width: 640px) { .vcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vcard { display: flex; flex-direction: column; border-radius: 18px; background: #f5f5f7; overflow: hidden; }
.vcard__pics { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.vcard__pic { margin: 0; }
.vcard__pic img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; cursor: zoom-in; }
.vcard--wide .vcard__pic img { aspect-ratio: 16 / 9; }
.vcard__body { padding: var(--sp-4) var(--sp-5) var(--sp-5); }
.vcard__when { display: inline-block; padding: .15rem .55rem; border-radius: 999px; background: #fff; font-size: .75rem; font-weight: 650; color: var(--leaf-700); }
.vcard h4 { margin: .55rem 0 .35rem; font-size: 1.05rem; line-height: 1.3; }
.vcard h4 small { display: block; font-size: .8rem; font-weight: 500; color: var(--gray-500); }
.vcard p { margin: 0; font-size: var(--text-sm); line-height: 1.55; }
@media (min-width: 640px) { .vcard--wide { grid-column: 1 / -1; } }
@media (min-width: 900px) {
  .vcard--wide { flex-direction: row; }
  .vcard--wide .vcard__pics { flex: 1.35 1 0; }
  .vcard--wide .vcard__body { flex: 1 1 0; align-self: center; }
}
/* ===================================================== 17 OCT, photos ==
   Every box photo sits on the same 4:3 white canvas at the same scale, so
   the prototype pairs read as one set. Outreach card photos fill their
   card, each with its own focal point.                                   */
.plant .fxrow--keep .fig.fig--bare:not(.fig--plain) img { border: 1px solid var(--gray-200); }
.plant .dsplit__pics--one { grid-template-columns: 1fr; }
.plant .dsplit__pics--one .fig--plain img { aspect-ratio: 3 / 2; }
@media (min-width: 900px) {
  .vcard--wide { min-height: 17rem; }
  .vcard--wide .vcard__pics { align-self: stretch; grid-auto-rows: 1fr; }
  .vcard--wide .vcard__pic { height: 100%; }
  .vcard--wide .vcard__pic img { height: 100%; aspect-ratio: auto; }
  .vcard--wide .vcard__pics .vcard__pic + .vcard__pic img { border-left: 2px solid #f5f5f7; }
}
@media (max-width: 899px) { .vcard--wide .vcard__pic img { aspect-ratio: 1 / 1; } }


/* ===================================================== 17 OCT, UPDATES ==
   The students' second 17 Oct pass. Each method tab opens on its own
   workflow drawing, centred; every set reads design-first and
   summary-last; each protectant group in a run strip sits in its own box. */
.plant .ovfig { margin: var(--sp-5) auto var(--sp-6); }
.plant .ovfig--sq { max-width: 34rem; }
/* hydroponics has two drawings, so they share the width */
.plant .ovpair { max-width: 58rem; margin-inline: auto; }
/* Both drawings are square, and with no caption under them the figure has
   nothing to give it height: it collapses to zero, the pictures never come
   near the viewport, and a lazy image that is never near the viewport is
   never fetched. Hold the square. The selector has to out-specify
   .plant .fxrow > .fig:not(.fig--plain) img, which sets aspect-ratio auto. */
.plant .fxrow.ovpair > .fig:not(.fig--plain) img { aspect-ratio: 1 / 1 !important; }

.setpanel__body--top { margin-top: var(--sp-4); }
.setpanel__body--top > .setpanel__text > :first-child { margin-top: 0; }
/* the set's head rides in the left column, level with the design card */
.setpanel__body--top > .setpanel__text > .setpanel__head { margin-bottom: var(--sp-4); }
.setpanel__body--top > .setpanel__text > .setpanel__head h4 { margin-top: .25rem; }
@media (min-width: 1000px) { .setpanel__body--top { grid-template-columns: minmax(0, 1fr) 22rem; } }
.setpanel__body--solo { grid-template-columns: minmax(0, 1fr) !important; }
.setpanel > .finding { margin-top: var(--sp-6); }

/* one box per protectant, so the boundaries need no dividing lines */
.runstrip { gap: var(--sp-2); }
.runstrip__group { padding: .4rem .5rem .5rem; border-radius: 11px; background: rgb(0 0 0 / .04); }
.runstrip__phase { font-size: .9375rem; color: var(--gray-700); }
@media (max-width: 760px) {
  .runstrip__group { padding: .3rem .4rem .4rem; }
  .runstrip__phase { font-size: .8125rem; }
}

/* ------------------------------------------------------------- ABSTRACT -- */

/* The outcomes ledger carries no status mark. The six rows here are readings
   from one screen, not six states of completion, and a column of ringed and
   half-filled dots down the left of the card invited the reader to sort them
   into done and not done before reading a single number. The row's own
   sentence says how the reading went, so the first grid column goes and the
   text runs full width under the name. bannerhead.css loads after this file,
   hence the extra `.plant` to win the cascade.                              */
.plant .abs-ledger a { grid-template-columns: minmax(0, 1fr); }
.plant .abs-ledger__text { grid-column: 1 / -1; }

/* ------------------------------------------------------- PLANT NOTEBOOK -- */

/* The record moved here from the Wet Lab Notebook page on 19 October. The
   three PDFs are still the ones notebook/pdf/ builds, so only the furniture
   around them is local: a head carrying the date range, the page count and
   the two links, and the framed reader under it. Same shapes as the notebook
   page used, renamed so nothing collides with the run panels above.        */
.plant { --nb-card: #f5f5f7; }   /* the notebook page's card grey, carried over */

.nbhead {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-4);
}
.nbhead__range { margin: 0; font: 650 1.25rem/1.25 var(--font-display); letter-spacing: -.015em; color: var(--black); }
.nbhead__facts { margin: 0; font-size: var(--text-sm); color: var(--gray-600); font-variant-numeric: tabular-nums; }
.nbhead__links { margin: 0 0 0 auto; display: flex; gap: var(--sp-2); }

.plant .btn {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .42rem .85rem; border-radius: 999px;
  background: var(--nb-card); color: var(--leaf-900);
  font-size: var(--text-xs); font-weight: 600; text-decoration: none;
  transition: background-color .2s ease;
}
.plant .btn:hover { background: var(--leaf-100); }
.plant .btn:focus-visible { outline: 2px solid var(--leaf-500); outline-offset: 2px; }
.plant .btn small { font-weight: 500; color: var(--gray-500); font-size: .6875rem; }

.pdfbox { margin-top: var(--sp-5); border-radius: 14px; background: var(--nb-card); overflow: hidden; }
.pdfbox iframe { display: block; width: 100%; height: 40rem; border: 0; background: var(--nb-card); }

/* A phone browser will not draw a PDF inside a page: the Open PDF and Download
   links take over there, and the file never loads behind an empty box.      */
@media (max-width: 640px) {
  .pdfbox { display: none; }
  .nbhead__links { margin-left: 0; }
}