/* =============================================================================
   ENGINEERING · page-local styles
   -----------------------------------------------------------------------------
   Rewritten 9 October 2026, overview section removed 10 October. The page is
   one unit of work repeated twenty-four times: the DBTL cycle. It is laid out in the soft idiom the Integrated Human
   Practices page uses for its pipelines, because the two pages do the same
   thing to a reader: a segmented control picks a chapter, the chapter opens on
   a hero, and the body of it is rounded cards on a light ground with one
   shadow and no rules.

     .track    one subsystem: a segmented control over one cycle at a time
     .seg      the frosted control itself, pinned under the site nav
     .cyc      one cycle, opening on its hero
     .dbtl     design, build, test and learn as four soft cards
     .ledger   the outcome of a cycle, and what it changed next

   Everything else (.sec, .fig, .fold, .callout, .tablewrap, .toc) comes
   from assets/css/page.css. With scripts off every panel is visible and the
   record reads top to bottom.
   ========================================================================== */

.eng {
  --ink:   #1d1d1f;
  --ink-2: #424245;
  --ink-3: #6e6e73;
  --well:  #f5f5f7;
  --ease:  cubic-bezier(.25, .8, .25, 1);

  --tr-clone:  #7a3b67;
  --tr-react:  #1f5f8b;
  --tr-phot:   #8a5a0b;
  --tr-soft:   #434b8f;
  --tr-lpa:    #a0392b;
  --tr-hydro:  #23684a;

  --max: 1440px;
  --measure: 76ch;
}

/* The tracks want the whole column; running prose keeps its measure. */
.eng .pagebody { max-width: none; }
.eng .pagebody .sec > p,
.eng .pagebody .sec > ul,
.eng .pagebody .sec > ol,
.eng .pagebody .sec > h3,
.eng .pagebody .sec > h4,
.eng .pagebody .sec > .callout { max-width: var(--measure); }

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

@media (min-width: 1040px) {
  .eng .toc { top: calc(var(--nav-h) + var(--sp-4)); }
}

/* ============================================================== TRACKS == */
/* Since 10 October 2026 the control is the shared Integrated Human Practices
   rail (assets/css/engage.css + engage.js), which this page's own copy was
   taken from in the first place. What stays here is the cycle number inside a
   button and the baseline alignment that number needs.                     */

.track { margin: var(--sp-5) 0 0; }
.eng .seg__btn { align-items: baseline; gap: .45rem; padding: .72rem 1rem; }
.seg__no {
  font-size: .75rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
  transition: color .25s ease;
}
.eng .seg__btn[aria-selected="true"] .seg__no { color: #fff; }

/* ============================================================== A CYCLE == */

.track > .cyc { padding: 0; background: none; scroll-margin-top: calc(var(--nav-h) + 5rem); }

.cyc__hero { margin: 0 0 var(--sp-7); text-align: center; }
.cyc__eyebrow {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: .5rem;
  margin: 0;
  font-size: .875rem; font-weight: 600; letter-spacing: -.005em;
  color: var(--pl);
}
.cyc__eyebrow i { font-style: normal; opacity: .4; }
.eng .cyc__title {
  margin: .4rem auto 0;
  max-width: 24ch;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.25rem + 1.9vw, 2.625rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.026em;
  color: var(--ink);
  text-wrap: balance;
}
.eng .cyc__intro {
  margin: var(--sp-5) auto 0;
  max-width: 42rem;
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  line-height: 1.6;
  letter-spacing: -.008em;
  color: var(--ink-2);
  text-align: left;
}

/* the outcome strip: what the cycle produced, and what it changed */
.ledger {
  display: grid;
  gap: .75rem;
  margin: var(--sp-6) 0 var(--sp-7);
}
@media (min-width: 52rem) { .ledger { grid-template-columns: 1fr 1fr; } }
.ledger > div {
  padding: 1.25rem 1.4rem 1.35rem;
  border-radius: 20px;
  background: var(--well);
}
.ledger > div.ledger--to { background: color-mix(in srgb, var(--pl) 9%, #fff); }
.eng .ledger dt {
  margin: 0;
  font-size: .8125rem; font-weight: 600; letter-spacing: -.005em;
  color: var(--ink-3);
}
.ledger--to dt { color: var(--pl); }
.eng .ledger dd {
  margin: .4rem 0 0;
  font-size: .9375rem; line-height: 1.62;
  color: var(--ink-2);
}

/* -- design, build, test, learn -- */
.dbtl {
  list-style: none;
  display: grid;
  gap: .75rem;
  grid-template-columns: 1fr;
  margin: 0 0 var(--sp-6);
  padding: 0;
  max-width: none;
}
@media (min-width: 52rem) { .dbtl { grid-template-columns: 1fr 1fr; } }

.eng .dbtl__step {
  margin: 0;
  min-width: 0;
  padding: 1.5rem 1.6rem 1.6rem;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / .04), 0 8px 28px -18px rgb(0 0 0 / .35);
}
.eng .dbtl__step h4 {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 .9rem;
  font-size: .9375rem; font-weight: 600;
  letter-spacing: -.008em;
  color: var(--ink);
}
.dbtl__badge {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 1.75rem; height: 1.75rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--pl) 12%, #fff);
  color: var(--pl);
  font-size: .8125rem; font-weight: 700;
}
.dbtl__step:last-child .dbtl__badge { background: var(--pl); color: #fff; }
.eng .dbtl__step p {
  margin: 0 0 .7rem;
  max-width: none;
  font-size: .9375rem;
  line-height: 1.62;
  color: var(--ink-2);
}
.eng .dbtl__step p:last-child { margin-bottom: 0; }
.eng .dbtl__step .fig { margin: 1rem 0 0; }

/* a state pill on the hero */
.stamp {
  display: inline-block;
  padding: .2em .65em;
  border-radius: 999px;
  background: var(--well);
  color: var(--ink-3);
  font-size: .6875rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase;
}
.stamp--closed { background: color-mix(in srgb, var(--tr-hydro) 12%, #fff); color: var(--leaf-900); }
.stamp--fail   { background: var(--rust-100);  color: var(--rust-700); }

/* the quiet line between two cycles: why the next one happened */
.handoff {
  display: grid;
  place-items: center;
  margin: var(--sp-7) 0 0;
  padding: 2.5rem .5rem 0;
  text-align: center;
}
.eng .handoff p {
  margin: 0;
  max-width: 36rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  letter-spacing: -.008em;
  color: var(--ink-3);
  text-wrap: pretty;
  text-align: left;
}

/* arriving: each cycle's cards ease in the first time they are reached */
.cyc-anim .dbtl__step, .cyc-anim .ledger > div {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.cyc-anim .dbtl__step.is-seen, .cyc-anim .ledger > div.is-seen { opacity: 1; transform: none; }

/* ==================================================== FIGURES AND NOTES == */

.eng .figs { display: grid; gap: var(--sp-4); margin: var(--sp-6) 0; }
@media (min-width: 52rem) {
  .eng .figs--2 { grid-template-columns: 1fr 1fr; }
  .eng .figs--3 { grid-template-columns: repeat(3, 1fr); }
}
.eng .figs .fig { margin: 0; }
.eng .fig img { border-radius: 16px; }
.eng .figs--3 .fig img, .eng .dbtl__step .fig img { border-radius: 12px; }

/* the "Show details" toggles are the shared fold (engage.css); on this page
   one stands alone at the foot of a cycle, so it keeps its own top margin. */
.eng .fold { margin: var(--sp-6) 0 0; }
.eng .fold > summary:hover { color: var(--pl); }

/* the one sentence in a cycle that is the finding itself */
.finding {
  margin: var(--sp-5) 0;
  padding: 0 0 0 2.75rem;
  position: relative;
}
.finding::before {
  content: "";
  position: absolute; left: 1rem; top: .35em; bottom: .35em;
  width: 2px; border-radius: 1px;
  background: var(--pl);
}
.eng .finding p {
  margin: 0;
  font-size: 1.0625rem; font-weight: 500;
  line-height: 1.55; letter-spacing: -.01em;
  color: var(--ink);
}

/* a block note where prose has not been written yet */
.eng .todo {
  display: block;
  margin: var(--sp-4) 0;
  padding: 1.1rem 1.25rem;
  border: 0;
  border-radius: 16px;
  background: var(--amber-100);
  color: var(--amber-700);
  font-size: .9375rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.55;
}
.eng .todo b {
  display: block;
  margin-bottom: .2rem;
  font-size: .6875rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase;
}

table.data caption {
  caption-side: top;
  padding: .6rem .85rem;
  text-align: left;
  font-size: var(--text-xs);
  color: var(--ink-3);
  background: var(--well);
}
table.seq code { font-size: .8125rem; word-break: break-all; }
table.data td.chg { background: color-mix(in srgb, var(--tr-hydro) 8%, #fff); }
table.data td.no  { background: var(--rust-100); color: var(--rust-700); }

/* the two wavelengths the circuit answers to */
.nm { font-weight: 600; }
.nm--g { color: #2f7d32; }
.nm--r { color: #a23a2a; }

/* ============================================================== NARROW == */

@media (max-width: 47.99rem) {
  .seg { top: calc(var(--nav-h) + .5rem); margin-bottom: var(--sp-6); }
  .seg__track { justify-content: flex-start; }
  .eng .dbtl__step, .ledger > div { border-radius: 18px; }
  .handoff { padding-top: 1.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cyc-anim .dbtl__step, .cyc-anim .ledger > div { opacity: 1; transform: none; transition: none; }
}

@media print {
  .eng .fold__body { display: block !important; }
}

/* =============================================================================
   ABSTRACT · 19 October 2026
   -----------------------------------------------------------------------------
   The technical map sat under the lead here from 18 October; it now opens
   /description, above that page's first section and the full width of the
   window, and its rules went with it into description.css. Moving it left this
   sheet with prose in both columns and no highlights at all, which no other
   page does, so the Cycle outcomes card is back in the right column and the
   abstract reads a quarter shorter. Nothing here overrides the shared sheet
   any more.                                                                  */