/* =============================================================================
   Results: the few things page.css and engage.css do not do.

   Since 10 October 2026 the page carries `engage` beside `res` and speaks the
   Integrated Human Practices soft style (assets/css/engage.css): the long
   stages are tabbed chapters, figures sit in rounded chart boxes, and the
   closing ledger is a pair of soft cards.

   COLOUR. One accent, the wiki's leaf, on the ask strips and the chart
   captions.
   ========================================================================== */

.res {
  /* One accent for the whole page. The three status colours that used to
     tint a section by how far its evidence went came off on 19 October:
     the prose says what each measurement is worth, and a coloured section
     said it again from the margin.                                       */
  --state: var(--leaf-700);
}

/* ========================================================== CHAIN INDEX ===
   One card per stage under the overview: the stage's own question.        */

.engage.res .goals {
  display: grid;
  gap: 1rem;
  margin: var(--sp-6) 0 0;
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) { .engage.res .goals { grid-template-columns: 1fr 1fr; } }
@media (min-width: 68rem) { .engage.res .goals { grid-template-columns: repeat(4, 1fr); } }

.engage.res .goal {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: .6rem;
  padding: 1.35rem 1.4rem 1.4rem;
  border-radius: 24px;
  background: var(--well);
  color: var(--ink);
  text-decoration: none;
  transition: background-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.engage.res a.goal:hover,
.engage.res a.goal:focus-visible {
  background: #fff;
  box-shadow: 0 3px 10px rgb(0 0 0 / .07), 0 0 0 .5px rgb(0 0 0 / .05);
  transform: translateY(-2px);
}
.engage.res .goal__no {
  display: inline-grid; place-items: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: 12px;
  background: var(--state);
  color: #fff;
  font-weight: 700; font-size: 1.0625rem; letter-spacing: -.02em;
}
.engage.res .goal__name { font-weight: 650; line-height: 1.25; letter-spacing: -.012em; color: var(--ink); }
.engage.res .goal__what { margin: 0; font-size: .875rem; line-height: 1.5; color: var(--ink-3); }
.engage.res .goal__state {
  justify-self: start;
  padding: .2rem .6rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--state) 11%, #fff);
  font-size: .75rem; font-weight: 600; line-height: 1.35;
  color: var(--state);
}

/* ============================================================ ASK STRIP ===
   Directly under each stage heading: the question that stage has to answer. */

.engage.res .ask {
  display: flex; flex-wrap: wrap; gap: .4rem 1.25rem;
  align-items: baseline;
  margin: var(--sp-5) 0;
  padding: 1rem 1.35rem;
  border-radius: 20px;
  background: color-mix(in srgb, var(--state) 8%, #fff);
}
.engage.res .ask b {
  font-size: .75rem; font-weight: 650;
  letter-spacing: 0; color: var(--state);
}
.engage.res .ask p { margin: 0; flex: 1 1 22rem; max-width: none; font-size: .9375rem; line-height: 1.55; color: var(--ink-2); }

/* =============================================================== LEDGER ====
   The credibility device. Two panels, same width: what the page is entitled
   to claim, and what it is not.                                            */

.engage.res .ledger { display: grid; gap: 1rem; margin: var(--sp-5) 0 0; grid-template-columns: 1fr; }
@media (min-width: 46rem) { .engage.res .ledger { grid-template-columns: 1fr 1fr; } }
.engage.res .ledger > div {
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  border-radius: 28px;
  background: var(--well);
}
.engage.res .ledger__yes { background: color-mix(in srgb, var(--leaf-700) 7%, #fff); }
.engage.res .ledger__no  { background: color-mix(in srgb, var(--rust-700) 7%, #fff); }
.engage.res .ledger b {
  display: block; margin-bottom: .9rem;
  font-size: .875rem; font-weight: 650; letter-spacing: -.005em;
}
.engage.res .ledger__yes > b { color: var(--leaf-700); }
.engage.res .ledger__no  > b { color: var(--rust-700); }
.engage.res .ledger ul { margin: 0; padding-left: 1.15em; }
.engage.res .ledger li { max-width: none; font-size: .9375rem; line-height: 1.6; color: var(--ink-2); }
.engage.res .ledger li + li { margin-top: .6rem; }
.engage.res .ledger li b { display: inline; margin: 0; font-size: inherit; color: var(--ink); }

/* ============================================================== FIGURES ====
   One frame, as before, now drawn in the soft language: every plate is a 4:3
   rounded box on white and the image is contained inside it, so a tall gel
   and a wide chart in the same row still agree. Captions sit under the box
   with a 3px edge in the stage's state colour.                             */

.engage.res .chartbox { padding: .85rem; background: var(--well); }
.engage.res .fold .chartbox, .engage.res .ledger .chartbox { background: #fff; }
.engage.res .chartbox .charts { align-items: start; }
.engage.res .chartbox .fig img {
  aspect-ratio: 4 / 3;
  padding: .75rem;
  box-sizing: border-box;
  object-fit: contain;
  object-position: center;
  background: #fff;
  border-radius: 14px;
}
/* a chart that is much wider than it is tall keeps its own shape, so the
   frame does not open a band of white above and below it */
.engage.res .chartbox .fig--wide img { aspect-ratio: auto; height: auto; }

/* a photograph has no labels to lose, so it fills its plate and crops */
.engage.res .chartbox .fig--photo img { padding: 0; object-fit: cover; }
.engage.res .chartbox .charts--1 { max-width: 46rem; margin: 0 auto; }
.engage.res .chartbox figcaption {
  margin: .85rem .25rem .25rem;
  padding-left: .9rem;
  border-left: 3px solid var(--state);
  font-size: .8125rem; line-height: 1.55; color: var(--ink-3);
}
.engage.res .chartbox figcaption b { color: var(--ink-2); font-weight: 650; }
@supports (grid-template-rows: subgrid) {
  @media (min-width: 40rem) {
    .engage.res .chartbox .charts--2, .engage.res .chartbox .charts--3 { grid-template-rows: auto auto; }
    .engage.res .chartbox .charts--2 .fig, .engage.res .chartbox .charts--3 .fig {
      display: grid; grid-row: span 2; grid-template-rows: subgrid;
    }
  }
}

/* =============================================================== TABLES ==== */

/* A numeric column sits centred under its own heading, so the figures in one
   column line up with each other and with the word above them. */
.engage.res table.data td.n, .engage.res table.data th.n { text-align: center; font-variant-numeric: tabular-nums; }
.engage.res table.data td:first-child { white-space: nowrap; }
.engage.res .tablewrap { overflow-x: auto; }

/* ====================================================== CHAPTER MEASURE ====
   Prose inside a chapter is not a direct child of .sec, so engage.css does
   not clamp it; hold it to the chapter intro's measure.                    */

.engage.res .chap > p,
.engage.res .chap > ul:not([class]),
.engage.res .chap > ol:not([class]),
.engage.res .chap > .ask,
.engage.res .chap > .callout { max-width: 44rem; margin-left: auto; margin-right: auto; }
.engage.res .chap__intro { max-width: 42rem; margin-left: auto; margin-right: auto; }
.engage.res .chap__intro p { margin-left: 0; margin-right: 0; }

/* =============================================================== PRINT ===== */

@media print {
  .engage.res .goals { grid-template-columns: 1fr 1fr; }
  .engage.res .fig, .engage.res .ledger, .engage.res table.data { break-inside: avoid; }
  .engage.res .lightbox, .sitenav-spacer { display: none !important; }
}

/* ============================================================ LIGHTBOX ===== */

.res .lightbox {
  display: none;
  place-items: initial;
  flex-direction: column;
  align-items: center; justify-content: center;
  padding: 3vh 3vw;
  background: rgb(8 20 15 / .97);
}
.res .lightbox.is-open { display: flex; }
.res .lightbox figure { margin: 0; width: 80vw; display: grid; justify-items: center; }
.res .lightbox img {
  max-width: 80vw; max-height: 76vh;
  width: auto; height: auto;
  padding: 0;
  aspect-ratio: auto;
  object-fit: contain;
  background: var(--white);
}
.res .lightbox figcaption {
  width: 80vw; max-width: 80vw;
  margin: var(--sp-4) 0 0;
  padding-left: 0;
  border: 0;
  text-align: left;
  color: var(--gray-200);
  font-size: var(--text-sm); line-height: 1.6;
}
.res .lightbox figcaption b { color: var(--white); }

/* ======================================================= CONSTRUCT TRACK ===
   17 October 2026. Section 4 is the longest on the page: five modules, two
   complete systems, eight production cassettes and nineteen gels. Written out
   as prose it is a wall of strings like
   Pveg-EEBD-RBS0-SamyQ-AcdS-Histag-B0015. Three devices carry that load
   instead.

   1. The track below draws each construct as the parts it is made of, in
      order, shaped by what the part does: a promoter points right, a
      terminator is squared off, the coding sequence is the wide one.
   2. The build matrix (table.data.bmatrix) puts every construct on one row
      against the three checks it had to pass.
   3. The gels sit in tabbed families, so the reader opens the one family
      they want and the other fifteen images stay out of the way.          */

.engage.res .ctrack { display: grid; gap: .9rem; margin: var(--sp-5) 0; }
.engage.res .ctrack__row {
  display: grid;
  gap: .45rem;
  padding: .95rem 1.1rem 1.05rem;
  border-radius: 18px;
  background: var(--well);
}
.engage.res .ctrack__name {
  font-size: .8125rem; font-weight: 650; letter-spacing: -.005em; color: var(--ink);
}
.engage.res .ctrack__name span { font-weight: 400; color: var(--ink-3); }
.engage.res .ctrack__parts { display: flex; flex-wrap: wrap; gap: .3rem; align-items: stretch; }
.engage.res .cpart {
  --c: var(--gray-500);
  display: inline-flex; align-items: center; justify-content: center;
  padding: .3rem .7rem;
  border-radius: 7px;
  background: color-mix(in srgb, var(--c) 13%, #fff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 28%, #fff);
  font-size: .75rem; font-weight: 600; line-height: 1.3;
  color: color-mix(in srgb, var(--c) 82%, #000);
  white-space: nowrap;
}
.engage.res .cpart[data-kind="promoter"] {
  --c: var(--leaf-700);
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%);
  padding-right: 1.1rem;
}
.engage.res .cpart[data-kind="rbs"]        { --c: var(--amber-700); border-radius: 999px; }
.engage.res .cpart[data-kind="cds"]        { --c: #3f5468; font-weight: 650; }
.engage.res .cpart[data-kind="terminator"] { --c: var(--rust-700); border-radius: 3px; }
.engage.res .cpart[data-kind="tag"]        { --c: var(--gray-500); border-radius: 999px; }

/* ========================================================= BUILD MATRIX ===
   Every construct against colony PCR, the amplicon check and sequencing. The
   dot is the state; the words are in the cell beside it on wide screens and
   under it on a phone.                                                     */

.engage.res table.data.bmatrix td,
.engage.res table.data.bmatrix th { vertical-align: top; }
.engage.res table.data.bmatrix td:first-child { white-space: normal; min-width: 13rem; }
.engage.res .mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.3rem; height: 1.3rem;
  border-radius: 50%;
  font-size: .75rem; font-weight: 700; line-height: 1;
}
.engage.res .mark[data-m="yes"]  { background: color-mix(in srgb, var(--leaf-700) 15%, #fff); color: var(--leaf-700); }
.engage.res .mark[data-m="none"] { background: var(--gray-100); color: var(--gray-500); }
.engage.res .mcount { margin-left: .45rem; font-size: .8125rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------------------------
   18 October: the sub-headings inside a section were 18.4 px against 17 px of
   body text, in the same weight and nearly the same grey, so they read as the
   first line of the paragraph under them rather than as a heading. They are now
   plainly bigger, darker and set apart, with the air above them that a new
   sub-section needs. The big centred chapter titles inside the segmented panels
   keep their own size.
   ------------------------------------------------------------------------- */
.engage.res .sec h3:not(.chap__title) {
  margin: 2.6rem 0 .55rem;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.012em;
  color: var(--ink, #1d1d1f);
}
.engage.res .sec h3:not(.chap__title) + p { margin-top: 0; }