/* Measurement
   ---------------------------------------------------------------------------
   The page runs on assets/css/engage.css (the Integrated Human Practices soft
   layout), so this file only holds what that sheet does not cover: the two
   equation lines, the ledger status marks the abstract sheet uses, and a few
   corrections for tables and lists inside a chapter.

   Everything that used to live here (the bespoke .fig frames, the hand-drawn
   SVG charts, the measurement map, the .fix boxes and the state colours) went
   with the 11 October rebuild. Figures are .chartbox/.fig now and open in the
   shared lightbox; the state of each measurement is said in prose where the
   measurement is reported, rather than in a colour key.                       */

/* An equation set on its own line. Used for total chlorophyll content and for
   the cumulative dosing concentration in the SiO2 protocol.                   */
.meas .eqn {
  margin: 1.1rem auto;
  padding: .85rem 1.1rem;
  max-width: 44rem;
  background: var(--well, #f5f5f7);
  border-radius: 14px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--ink-1);
  text-align: center;
  text-wrap: pretty;
}
.meas .blk .eqn { background: #fff; }

/* Chapter prose needs the same measure as section prose; engage.css only
   holds .sec > p. Without this, a paragraph inside a .chap runs the full
   1400px frame. The same trap was fixed on Biomanufacturing and Results.      */
.meas .chap > p,
.meas .chap > ol,
.meas .chap > ul:not(.findings) { max-width: 44rem; margin-inline: auto; }

/* Numbers read better right-aligned, but only where the whole column is
   numeric: the flow, pressure and OD600 tables.                               */
.meas table.data td { vertical-align: top; }
.meas table.data caption {
  margin-bottom: .55rem;
  font-size: .8125rem;
  line-height: 1.45;
  color: var(--ink-3);
  text-align: left;
  text-wrap: pretty;
  /* The caption sits inside the scrolling wrapper, so on a table wider than
     the column it would slide out of view with the first column. Pin it.     */
  position: sticky;
  left: 0;
  display: block;
  width: max-content;
  max-width: 100%;
}

/* Procedure lists inside a fold are long; tighten them so a twelve-step
   protocol does not push the fold past a screen.                              */
.meas .fold__body ol,
.meas .fold__body ul { margin: .4rem 0 1rem; padding-left: 1.35rem; }
.meas .fold__body li { margin: 0 0 .35rem; font-size: .9375rem; line-height: 1.6; color: var(--ink-2); }
.meas .fold__body h5 {
  margin: 1.4rem 0 .35rem;
  font-size: .9375rem;
  font-weight: 650;
  letter-spacing: .01em;
  color: var(--ink);
}
.meas .fold__body > h5:first-child { margin-top: 0; }

/* A card that carries a list rather than a paragraph (the three "not measured
   yet" cards).                                                                */
.meas .card > ul { margin: .5rem 0 0; padding-left: 1.1rem; }
.meas .card > ul li { margin: 0 0 .3rem; font-size: .9375rem; line-height: 1.55; color: var(--ink-2); }

/* The plate photographs are tall portraits; in a row of three they would
   otherwise set an enormous row height.                                       */
.meas .charts--3 .fig img { max-height: 30rem; object-fit: contain; }

/* A chart and its data table side by side in one .chartbox (the ELISA standard
   curve and the two DNPH charts). The grid child needs min-width:0 or the
   table's intrinsic width blows the column out, and it should sit at the top
   rather than stretch to the figure's height.                                 */
.meas .chartbox .tablewrap { min-width: 0; align-self: start; margin: 0; }
.meas .chartbox .charts--2 > .tablewrap table.data { font-size: .875rem; }