/* =============================================================================
   ReLEAF hardware: the record, in the wiki's own language
   -----------------------------------------------------------------------------
   The instrument pages are two documents in one file. Above, a dark stage
   where the machine takes itself apart under scroll; below, the technical
   record. The stage is Anton's and is not touched by anything here. This file
   is only about the half below it, and it brings that half into the soft
   language the Integrated Human Practices page established and the seven
   Engagement pages share: a frosted segmented control that switches between
   cycles, pale rounded cards instead of ruled boxes, and folds for anything a
   reader does not need on the first pass.

   Every rule is scoped to `body.doc-light` or to the record's own containers,
   which is the same split polish.css and wiki-align.css already use:
   photographs of hardware want black, a record wants ink on paper. polish.js
   adds `doc-light` when the top of .doc-wrap crosses the upper third of the
   viewport, so "after the animation" is a state the page already knows.

   Load order on each page:
     css/style.css          the instrument's own (Anton)
     ../css/polish.css      the section's polish (Anton)
     ../css/wiki-align.css  the record's wiki palette and links
     ../css/hwdoc.css       THIS FILE, last
     ../../assets/css/nav.css, nav-dark.css

   Values under IHP below are copied from assets/css/engage.css and
   assets/css/bannerhead.css so the pages match the rest of the wiki to the
   pixel. Change a shared component in all three.
   ========================================================================== */

/* ---------------------------------------------------------------- TOKENS -- */
/* The hardware pages do not load assets/css/tokens.css: they have their own
   type stack and their own --fg/--line/--faint, and pulling the wiki's token
   file in would duplicate an @font-face for no gain. The dozen values the
   ported components actually use are declared here instead, on the record's
   own containers, so nothing leaks up into the stage.                       */

.doc-wrap,
.hwsum {
  --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;   --sp-5: 1.5rem;
  --sp-6: 2rem;   --sp-7: 3rem;   --sp-8: 4rem;
  --ease: cubic-bezier(.25, .8, .25, 1);
  /* the record's ink, the same three greys IHP uses */
  --w-ink:   #1d1d1f;
  --w-ink-2: #424245;
  --w-ink-3: #6e6e73;
  --w-well:  #f5f5f7;
  /* the Dry Lab tab's colours: hardware hangs under Dry Lab in the site nav,
     and the contents rail and status glyphs take their colour from the tab */
  --w-tab:      #3f5a66;
  --w-tab-line: #6f8f9c;
  --w-tab-pill: #e3eef2;
  --w-paper:    #eef4f6;
  --w-paper-2:  #f9fbfc;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  /* the pill colour a cycle's chapter paints with; set per panel with .pl-N */
  --pl: var(--w-tab);
}
.pl-1 { --pl: #3f5468; } .pl-2 { --pl: #23684a; } .pl-3 { --pl: #8a5a0b; }
.pl-4 { --pl: #7a3b67; } .pl-5 { --pl: #1f5f8b; } .pl-6 { --pl: #5a4c9c; }

/* The stage sits in front of everything while it is still on screen. The
   summary rises into its bottom edge, so it has to be allowed through. */
body.doc-light .story-stage { z-index: 0; }


/* ============================================================== 1 SUMMARY ==
   The sheet that meets the animation
   -----------------------------------------------------------------------------
   The wiki's 23 other pages open with a student drawing and, under it, a
   one-screen abstract on a sheet of paper: what the page argues and how each
   claim went, before the first scroll. The instrument pages have no drawing
   to put there -- the machine has just spent a full screen of scroll showing
   itself, which is the same job done better -- so the sheet arrives on its
   own, and the overlap that used to tuck it under the drawing now tucks it
   under the stage. The animation hands the reader to the sheet.

   Three parts, left to right on a laptop and stacked on a phone:
     .hwsum__story    what the instrument is and what it does, in the serif
     .hwsum__spec     the numbers the stage just showed, as a small strip
     .hwsum__ledger   each claim with a mark for how it went, linked into the
                      record, which is the whole of the page's navigation at a
                      glance
   ========================================================================== */

.hwsum {
  position: relative;
  z-index: 3;
  grid-column: 1 / -1;          /* across all three columns of .doc-wrap */
  max-width: 1400px;
  margin: 0 auto;
  padding: 0;
  /* lift into the seam: the blend band above is 170-300px, and the sheet
     climbs about a sixth of it so the paper interrupts the fade rather than
     starting after it has finished */
  margin-top: calc(-1 * clamp(28px, 5vh, 64px));
  font-size: 1rem;
  line-height: 1.6;
}
.hwsum__inner {
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 1fr);
  padding: clamp(1.5rem, 1rem + 2vw, 2.75rem) clamp(1.25rem, .2rem + 4vw, 4rem) clamp(1.5rem, 1rem + 1.2vw, 2.5rem);
  border-radius: 28px;
  background: linear-gradient(180deg, var(--w-paper) 0%, var(--w-paper) 45%, var(--w-paper-2) 100%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .8),
    0 1px 2px rgb(14 22 28 / .05),
    0 40px 80px -48px rgb(0 0 0 / .55);
}
@media (min-width: 980px) {
  .hwsum__inner {
    grid-template-columns: minmax(0, 1.34fr) minmax(0, 1fr);
    column-gap: clamp(2.5rem, 1rem + 3vw, 4.5rem);
    align-items: start;
  }
  .hwsum__spec { grid-column: 1; }
  .hwsum__ledger { grid-column: 2; grid-row: 1 / span 2; }
}

/* small capitals that name each column, the wiki's .abs-kicker */
.hwsum .hw-kicker {
  margin: 0 0 1rem;
  font-family: inherit;
  font-size: .6875rem;
  font-weight: 650;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--w-tab);
}

/* one sentence in the book face, then the paragraphs */
.hwsum__lead {
  margin: 0;
  max-width: 34ch;
  font-family: var(--serif);
  font-size: clamp(1.35rem, 1rem + 1vw, 1.75rem);
  font-weight: 400;
  line-height: 1.24;
  letter-spacing: -.01em;
  color: var(--w-ink);
  text-wrap: balance;
}
.hwsum__lead em { font-style: italic; }
.hwsum__body {
  margin: 1rem 0 0;
  max-width: 66ch;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--w-ink-2);
  text-wrap: pretty;
}
.hwsum__body + .hwsum__body { margin-top: .7rem; }
.hwsum__body strong { font-weight: 620; color: var(--w-ink); }

/* ---- the numbers the stage just showed ----------------------------------
   The stage carries four figures in its corner while it plays. They are the
   instrument's size and reach, and a reader who has just watched them go past
   should find them again at the top of the record rather than hunting for a
   specifications table in part 6.                                          */
.hwsum__spec { margin: var(--sp-5) 0 0; }
.hwsum__spec dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr));
  gap: .9rem 1.4rem;
  margin: 0;
  padding: .95rem 0 0;
  border-top: 1px solid rgb(63 90 102 / .18);
}
.hwsum__spec div { margin: 0; }
.hwsum__spec dt {
  margin: 0;
  font-size: .625rem;
  font-weight: 650;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--w-ink-3);
}
.hwsum__spec dd {
  margin: .3rem 0 0;
  font-size: 1.25rem;
  font-weight: 620;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--w-ink);
  font-variant-numeric: tabular-nums;
}
.hwsum__spec dd span {
  margin-left: .12em;
  font-size: .8125rem;
  font-weight: 550;
  letter-spacing: 0;
  color: var(--w-ink-3);
}

/* ---- the claims ---------------------------------------------------------- */
.hw-ledger {
  list-style: none; margin: 0;
  padding: .35rem;
  background: rgb(255 255 255 / .9);
  border-radius: 22px;
  box-shadow: 0 1px 2px rgb(14 22 28 / .05), 0 18px 40px -28px rgb(14 22 28 / .3);
}
.hw-ledger li { margin: 0; }
.hw-ledger a {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: baseline;
  gap: .12rem;
  padding: .62rem 1rem .68rem;
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  border: 0;
  transition: background-color .25s ease;
}
.hw-ledger a:hover, .hw-ledger a:focus-visible { background: var(--w-paper); }
.hw-ledger__name { font-size: 1rem; font-weight: 620; letter-spacing: -.008em; color: var(--w-ink); }
.hw-ledger__text { grid-column: 1 / -1; font-size: .875rem; line-height: 1.45; color: var(--w-ink-3); text-wrap: pretty; }

/* the sheet settles in once, the way the wiki's abstract does */
@media (prefers-reduced-motion: no-preference) {
  .hwsum__inner > * { animation: hwsettle .9s cubic-bezier(.2, .7, .2, 1) both; }
  .hwsum__inner > :nth-child(2) { animation-delay: .08s; }
  .hwsum__inner > :nth-child(3) { animation-delay: .16s; }
  @keyframes hwsettle { from { opacity: 0; transform: translateY(8px); } }
}
/* short laptop windows give up some air, as bannerhead.css does */
@media (min-width: 980px) and (max-height: 780px) {
  .hwsum__inner { padding-top: 1.4rem; padding-bottom: 1.25rem; }
  .hwsum .hw-kicker { margin-bottom: .65rem; }
  .hwsum__lead { font-size: 1.3rem; }
  .hwsum__body { margin-top: .7rem; font-size: .9375rem; line-height: 1.6; }
  .hw-ledger a { padding: .55rem .9rem .6rem; }
  .hw-ledger__text { font-size: .8125rem; }
}

/* The record's own header repeated the instrument's name and standfirst
   directly under the sheet, which said the same thing twice. The sheet is
   now the opening, so the header keeps only its section marker. */
/* `+` never fired: .doc-nav sits between the sheet and the record. */
.doc-wrap .hwsum ~ .doc .doc-head { margin-bottom: var(--sp-7); }


/* ====================================================== 3 THE CONTENTS RAIL ==
   The record's sidebar, in the wiki's rail form
   -----------------------------------------------------------------------------
   The wiki's pages carry an "On this page" rail: the tab's colour, the
   section numbers, a pill on the section the reader is in, and sub-headings
   that unfold under it. The hardware record had a rail of its own -- the same
   idea in the section's monospace, centred in the viewport -- so this keeps
   the rail's position and Anton's dark field, as asked, and gives it the
   wiki's structure and behaviour: numbers, the pill, and the unfolding subs.

   .doc-nav keeps its grid column and its stickiness from style.css. hwdoc.js
   fills it from the record's own headings, so a section added to a page shows
   up in the rail without anyone editing a list.
   ========================================================================== */

.doc-nav { justify-content: flex-start; padding-top: calc(var(--nv-h, 68px) + 5.5rem); }
.doc-nav .doc-nav-label { letter-spacing: .2em; }

/* 14 Oct 2026. The record is one continuous scroll again, so the rail is the
   only way round it and lists every part at once, with the open one unfolded.
   In a short laptop window that no longer fits: the rail scrolls
   inside itself instead of running off the bottom, without a scrollbar, and
   hwdoc.js keeps the part the reader is in on screen. It stays sticky -- the
   `top: 0; height: 100vh` style.css gives it -- so nothing here may set an
   overflow on .doc-wrap or .doc, which would unstick it. */
.doc-nav {
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  padding-bottom: 2rem;
}
.doc-nav::-webkit-scrollbar { display: none; }
/* style.css spaces its own one-line entries .7rem apart; the generated rail
   has a pill and unfolding subs, and wants them tighter */
.doc-nav .hwtoc li { margin-bottom: 0; }
.doc-nav .hwtoc__sec + .hwtoc__sec { margin-top: .12rem; }
body.doc-light .doc-nav .doc-nav-label { color: var(--w-ink-3); }

/* the generated rail */
.hwtoc { list-style: none; margin: 0; padding: 0; }
.hwtoc ol { list-style: none; margin: 0; padding: 0; }
.hwtoc__sec { margin: 0; }
.hwtoc__h {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr);
  align-items: baseline;
  gap: .1rem;
  padding: .4rem .6rem .42rem .5rem;
  border: 0;
  border-radius: 10px;
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: -.005em;
  color: #8b96a3;
  text-decoration: none;
  transition: background-color .22s ease, color .22s ease;
}
.hwtoc__no {
  font-size: .6875rem;
  font-weight: 600;
  color: #5d6875;
  font-variant-numeric: tabular-nums;
}
.hwtoc__h:hover { color: #e8edf2; background: rgb(255 255 255 / .05); }
.hwtoc__sec.is-here > .hwtoc__h { color: #f4f7fa; background: rgb(255 255 255 / .08); }
.hwtoc__sec.is-here > .hwtoc__h .hwtoc__no { color: #3ddc8b; font-weight: 650; }

/* the record is light: the rail follows it over */
body.doc-light .hwtoc__h { color: #6b7a85; }
body.doc-light .hwtoc__no { color: #93a2ad; }
body.doc-light .hwtoc__h:hover { color: var(--w-tab); background: rgb(63 90 102 / .06); }
body.doc-light .hwtoc__sec.is-here > .hwtoc__h { color: var(--w-tab); background: var(--w-tab-pill); }
body.doc-light .hwtoc__sec.is-here > .hwtoc__h .hwtoc__no { color: var(--w-tab); font-weight: 650; }

/* sub-headings: shut, and unfolded under the section the reader is in */
.hwtoc__subs {
  overflow: hidden;
  max-height: 0;
  margin: 0; padding: 0;
  transition: max-height .4s var(--ease);
}
.hwtoc__sec.is-here > .hwtoc__subs { max-height: 40rem; }
.hwtoc__sub { opacity: 0; transition: opacity .3s ease; }
.hwtoc__sec.is-here .hwtoc__sub { opacity: 1; }
.hwtoc__sub a {
  position: relative;
  display: block;
  padding: .24rem 0 .24rem 2.1rem;
  border: 0;
  font-size: .75rem;
  line-height: 1.35;
  color: #7c8794;
  text-decoration: none;
  transition: color .22s ease;
}
.hwtoc__sub a::before {
  content: "";
  position: absolute; left: 1.1rem; top: .62rem;
  width: .3rem; height: .3rem;
  border-radius: 50%;
  background: currentColor;
  transform: scale(0);
  transition: transform .22s var(--ease);
}
.hwtoc__sub a:hover { color: #e8edf2; }
.hwtoc__sub a.is-active { color: #f4f7fa; font-weight: 600; }
.hwtoc__sub a.is-active::before { transform: scale(1); }
body.doc-light .hwtoc__sub a { color: #7d8b95; }
body.doc-light .hwtoc__sub a:hover { color: var(--w-tab); }
body.doc-light .hwtoc__sub a.is-active { color: var(--w-tab); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .hwtoc__subs, .hwtoc__sub, .hwtoc__sub a::before, .hwtoc__h { transition: none !important; }
}
/* the rail is a luxury of a wide window; style.css already hides it narrow */
@media (max-width: 1100px) { .doc-nav { padding-top: 0; } }


/* ============================================================= 4 THE IHP KIT ==
   Cycle intros, cards and folds
   -----------------------------------------------------------------------------
   Ported from assets/css/engage.css. Until 15 Oct 2026 a segmented control
   here switched a record's design-build-test-learn cycles one at a time; for
   two days every cycle was stacked instead, and on 17 Oct the owner asked for
   the clickable bar back. It lives in 4b, below. What is left here is what
   the cycles and the rest of the record share.

   The house rule the rest of the wiki follows applies here too: the argument
   stays flat on the page and the evidence folds. A cycle's finding is never
   behind a click; its full parameter table, its protocol and its raw run log
   are.
   ========================================================================== */

/* ---- a cycle's opening and close ----------------------------------------- */
.chap__hero { margin: 0 0 var(--sp-7); text-align: center; }
.chap__eyebrow { margin: 0; font-size: .875rem; font-weight: 600; letter-spacing: -.005em; color: var(--pl); }
.doc .chap__title {
  margin: .35rem 0 0;
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.028em;
  color: var(--w-ink);
}
.chap__intro { margin: var(--sp-5) 0 0; text-align: left; }
.doc .chap__intro p {
  margin: 0 auto var(--sp-3);
  max-width: 40rem;
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.125rem);
  line-height: 1.6;
  letter-spacing: -.008em;
  color: var(--w-ink-2);
}
.chap__end {
  margin: var(--sp-7) 0 0;
  padding: clamp(1.5rem, 1.1rem + 2vw, 2.75rem);
  border-radius: 28px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--pl) 13%, #fff), color-mix(in srgb, var(--pl) 5%, #fff));
}
.doc .chap__end p:not(.chap__eyebrow) {
  margin: .75rem 0 0;
  max-width: 44rem;
  font-size: clamp(1.125rem, 1.02rem + .5vw, 1.375rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -.016em;
  color: var(--w-ink);
}

/* ---- pale rounded cards -------------------------------------------------- */
/* .hwcard, not .card: all three instrument stylesheets already style a .card
   of their own, and a shared name would have them trading properties with
   this one depending on which file loaded last.  */
.hwcard {
  padding: clamp(1.35rem, 1rem + 1.8vw, 2.4rem);
  border-radius: 28px;
  background: var(--w-well);
  color: var(--w-ink);
}
.hwcard + .hwcard, .hwcards > .hwcard + .hwcard { margin-top: 1.25rem; }
.hwcards { display: grid; gap: 1.25rem; margin: var(--sp-5) 0 0; }
.hwcards > .hwcard + .hwcard { margin-top: 0; }
@media (min-width: 52rem) {
  .hwcards--2 { grid-template-columns: 1fr 1fr; }
  .hwcards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.hwcard--white { background: #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / .06), 0 24px 44px -34px rgb(0 0 0 / .35); }
/* polish.css styles `body.doc-light .sec h3` and `.sec h4` -- a descendant
   selector that outranks this one and hangs an amber rule and its padding on
   any heading used as a card's name. The card draws its own surface and wants
   neither. */
.doc .hwcard .hwcard__name,
.doc .sec .hwcard__name {
  padding-top: 0;
  border-top: 0;
  color: var(--w-ink);
}
.doc .hwcard__name {
  margin: 0 0 .6rem;
  font-size: 1.1875rem; font-weight: 650; line-height: 1.2;
  letter-spacing: -.018em; color: var(--w-ink); text-transform: none;
}
.doc .hwcard p, .doc .hwcard li { max-width: 68ch; font-size: .96875rem; line-height: 1.65; color: var(--w-ink-2); }
.doc .hwcard p { margin: 0 0 .85rem; }
.doc .hwcard > :last-child, .doc .hwcard p:last-child { margin-bottom: 0; }
.doc .hwcard h4, .doc .hwcard h5 {
  margin: var(--sp-5) 0 .5rem;
  font-size: 1.0625rem; font-weight: 650; letter-spacing: -.012em;
  text-transform: none; color: var(--w-ink);
}
.doc .hwcard > h4:first-child, .doc .hwcard > h5:first-child { margin-top: 0; }

/* ---- folds: what stays behind a click ------------------------------------ */
.folds { display: grid; gap: .5rem; margin: 1.25rem 0 0; }
.fold {
  border-radius: 20px;
  background: var(--w-well);
  scroll-margin-top: calc(var(--nv-h, 68px) + var(--sp-4));
}
.hwcard .fold, .chap__end .fold { background: #fff; }
.doc .fold > summary {
  position: relative;
  display: flex; align-items: center; gap: .75rem;
  padding: 1rem 3rem 1rem 1.35rem;
  list-style: none;
  font-size: 1rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.35;
  color: var(--w-ink);
  cursor: pointer;
}
.doc .fold > summary::-webkit-details-marker { display: none; }
.doc .fold > summary::marker { content: ""; }
.doc .fold > summary::after {
  content: "";
  position: absolute; right: 1.35rem; top: 50%;
  width: .5rem; height: .5rem;
  margin-top: -.35rem;
  border-right: 1.75px solid var(--w-ink-3);
  border-bottom: 1.75px solid var(--w-ink-3);
  transform: rotate(45deg);
  transition: transform .3s var(--ease), margin .3s var(--ease);
}
.doc .fold[open] > summary::after { transform: rotate(-135deg); margin-top: -.1rem; }
.doc .fold > summary:hover { color: var(--pl); }
.doc .fold > summary:focus-visible { outline: 2px solid var(--pl); outline-offset: 2px; border-radius: 20px; }
.fold__t { min-width: 0; }
.fold__sub { margin-left: auto; font-size: .8125rem; font-weight: 500; color: var(--w-ink-3); white-space: nowrap; }
.fold__body { padding: 0 1.35rem 1.35rem; }
.doc .fold__body p, .doc .fold__body li { max-width: 72ch; font-size: .9375rem; line-height: 1.62; color: var(--w-ink-2); }
.doc .fold__body p { margin: 0 0 .75rem; }
.doc .fold__body > :last-child { margin-bottom: 0; }
.doc .fold__body h4, .doc .fold__body h5 {
  margin: var(--sp-4) 0 .4rem;
  font-size: .9375rem; font-weight: 650; color: var(--w-ink);
  text-transform: none; letter-spacing: -.005em;
}
.doc .fold__body > h4:first-child, .doc .fold__body > h5:first-child { margin-top: 0; }
/* a fold a link just opened gets one pulse so the reader sees where they landed */
.fold.is-flash { animation: hwflash 2.2s var(--ease); }
@keyframes hwflash {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  12%, 55% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--pl) 38%, transparent); }
}

/* tables and figures inside the ported components keep the record's own
   styling from style.css; only their frame softens so they sit in a card */
.hwcard .tablewrap, .fold .tablewrap { box-shadow: none; border-radius: 14px; }
.hwcard .fig img, .fold .fig img, .chap__intro .fig img { border-radius: 14px; }


/* ------------------------------------------------------- THE OLD CARD MAP -- */
/* toc.js builds a grid of section cards under the record's header, which was
   both a map for a judge and the only contents list below 1100px, where the
   sticky rail hides. The summary sheet's ledger now does the first job better
   -- it carries how each claim went, not just its name -- and it is on the
   page at every width, so it does the second as well. Three navigations for
   one record is two too many: the card map goes on the pages that carry a
   summary. toc.js is left alone, so the notebook and the hub still get it.

   It needs the three-part selector: wiki-align.css carries
   `body.doc-light .doc-wrap .doc-map { display: block }`, which outranked the
   two-part rule this used to be, so the map came back the moment the reader
   reached the record -- exactly where it was least wanted. Same weight now,
   and this file loads last. */
body.hwreveal .doc-map,
body.hwreveal .doc-wrap .doc-map { display: none; }


/* ------------------------------------------------------------ ANCHOR ROOM -- */
/* The site nav is fixed over the record. An anchor jump that does not allow
   for it puts the heading it was aimed at underneath, which is what every
   link into a section, every ledger row on the summary sheet and every
   cross-reference in the text was doing. One rule, and they all land clear. */
.doc .part,
.doc .sec,
.doc .fig,
.doc .frame,
.doc figure[id],
.doc .chap,
.doc [id] > h3 { scroll-margin-top: calc(var(--nv-h, 68px) + 1.5rem); }
/* Inside a group of prototypes the tab bar is pinned (.5rem off the nav, its
   height measured into --cyc-bar-h by hwdoc.js), so anything a link lands on
   in a prototype starts under it -- and a prototype's band lands exactly
   where it sits under the bar. */
.doc .has-tabs > .cyc,
.doc .has-tabs > .cyc :is(.sec, .fig, .frame, figure[id], [id] > h3, [id]) {
  scroll-margin-top: calc(var(--nv-h, 68px) + .5rem + var(--cyc-bar-h, 3.5rem) + var(--cyc-gap, 1.5rem));
}


/* ========================================================== 4b THE CYCLES ==
   17 Oct 2026. Every instrument's engineering cycles, behind a tab bar.
   -----------------------------------------------------------------------------
   The owner: "bring back the horizontal bar that we click for the dbtl, don't
   make it linear they can choose whether to skip or not." Each group of
   prototypes has one bar, the digital twin page's segmented pill: a tab per
   prototype, its number in a badge and its short name, the open one a dark
   pill. One prototype shows at a time -- a band that says which it is (the
   DBTL ring, the kicker, the title, the four stages as links) and then its
   design, build, test and learn -- and a small "Next" at its foot opens the
   one after it. The bar is sticky inside its own group only (hwdoc.js, part
   4), so it leaves with the group and never stacks on another bar. With
   JavaScript off, and in print, the prototypes are stacked as before.
   ========================================================================== */

.cycles { position: relative; --cy-ink: var(--w-leaf-700, #23684a); --cyc-gap: 1.5rem; }
.cyc {
  --dq-d: var(--w-leaf-900, #14402b); --dq-b: var(--w-leaf-700, #23684a); --dq-t: #2e7d5b; --dq-l: #1d6a62;
  margin: 0;
}
/* a shut tab stays shut whatever a page's own stylesheet says about display */
.cycles .cyc[hidden] { display: none !important; }

/* ---- the bar ---------------------------------------------------------------- */
/* where the bar sits when it is not pinned (hwdoc.js measures it) */
.cyc-tabs__at { display: block; height: 0; }
.cyc-tabs {
  position: sticky;
  top: calc(var(--nv-h, 68px) + .5rem);
  z-index: 6;
  margin: 0 calc(-1 * var(--bleed, 0px)) var(--cyc-gap);
  border-radius: 999px;
  background: rgb(255 255 255 / .88);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
          backdrop-filter: saturate(180%) blur(18px);
  box-shadow: inset 0 0 0 1.5px var(--w-tab, #3f5a66), 0 10px 26px -18px rgb(14 22 28 / .5);
  transition: box-shadow .3s ease, opacity .25s ease, transform .3s var(--ease), visibility 0s;
}
.cyc-tabs.is-pinned { box-shadow: inset 0 0 0 1.5px var(--w-tab, #3f5a66), 0 16px 34px -16px rgb(14 22 28 / .42); }
/* pinned while another group's bar is in view: it steps aside (hwdoc.js) */
.cyc-tabs.is-away {
  opacity: 0;
  transform: translateY(-.6rem);
  visibility: hidden;
  pointer-events: none;
  transition: box-shadow .3s ease, opacity .2s ease, transform .3s var(--ease), visibility 0s .2s;
}
.cyc-tabs__list {
  position: relative;     /* the tabs' offsetParent: hwdoc.js centres the open one */
  display: flex;
  gap: 2px;
  padding: 5px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  border-radius: inherit;
}
.cyc-tabs__list::-webkit-scrollbar { display: none; }
.doc .cyc-tab {
  flex: 1 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 2.75rem;
  margin: 0;
  padding: .45rem 1.1rem .45rem .55rem;
  border: 0;
  border-radius: 999px;
  background: none;
  font: inherit;
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--w-ink-2, #424245);
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .3s var(--ease), color .2s ease, box-shadow .3s var(--ease);
}
.doc .cyc-tab:hover { color: var(--w-tab, #3f5a66); background: rgb(63 90 102 / .07); }
.doc .cyc-tab[aria-selected="true"] {
  color: #fff;
  font-weight: 600;
  background: var(--w-tab, #3f5a66);
  box-shadow: 0 3px 8px -2px rgb(0 0 0 / .22);
}
.doc .cyc-tab:focus-visible { outline: 2px solid var(--w-tab, #3f5a66); outline-offset: 2px; }
/* the number, a small ring like the band's */
.cyc-tab__n {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.625rem;
  height: 1.625rem;
  border-radius: 50%;
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--w-tab, #3f5a66);
  background: var(--w-tab-pill, #e3eef2);
  transition: background-color .3s ease, color .3s ease;
}
.cyc-tab[aria-selected="true"] .cyc-tab__n { color: var(--w-tab, #3f5a66); background: #fff; }
/* not written yet: the record's orange */
.cyc-tab.is-todo .cyc-tab__n { color: #c2410c; background: #fff7f2; box-shadow: inset 0 0 0 1.5px #fdba8c; }
.cyc-tab.is-todo[aria-selected="true"] .cyc-tab__n { background: #fff; box-shadow: none; }

/* compact: the numbers, and the name of the prototype that is showing */
.cyc-tabs.is-compact .cyc-tab:not([aria-selected="true"]) .cyc-tab__t { display: none; }
.doc .cyc-tabs.is-compact .cyc-tab:not([aria-selected="true"]) { padding-left: .55rem; padding-right: .55rem; }
/* a bar wider than the screen scrolls inside itself; its edges fade to say so */
.cyc-tabs.is-scroll .cyc-tabs__list {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 1rem, #000 calc(100% - 1.4rem), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 1rem, #000 calc(100% - 1.4rem), transparent);
}
@media (max-width: 600px) {
  .doc .cyc-tab { min-height: 2.5rem; gap: .45rem; padding: .35rem .85rem .35rem .4rem; font-size: .875rem; }
  .cyc-tab__n { width: 1.5rem; height: 1.5rem; font-size: .75rem; }
}

/* the prototype that was just picked slides in */
.cycles .cyc.is-entering { animation: cyc-in .45s var(--ease) both; }
@keyframes cyc-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .cyc-tabs, .doc .cyc-tab, .cyc-tab__n { transition: none; }
  .cycles .cyc.is-entering { animation: none; }
}
html:not(.js) .cyc-tabs { display: none; }
/* on paper every prototype is there, in order */
@media print {
  .cyc-tabs, .cyc-tabs__at, .doc .cyc-next { display: none !important; }
  .cycles .cyc[hidden] { display: block !important; }
}

/* ---- a prototype: one card, a band on top ---------------------------------- */
/* Every selector starts `body.hwreveal .doc-wrap .doc .cycles`: the band is a
   section.part on the LPA and a section.sec elsewhere, and both of those
   carry card and title rules this has to outrank. */
body.hwreveal .doc-wrap .doc .cycles .cyc > section.cyc__band {
  margin: 0 calc(-1 * var(--bleed)) 0;
  padding: calc(var(--card-pad) * .9) var(--card-pad) calc(var(--card-pad) * .8);
  min-height: 0;
  border: 0;
  border-radius: 28px 28px 0 0;
  background: linear-gradient(180deg, var(--w-leaf-50, #f4f9f6), #fff 85%);
  box-shadow: inset 0 0 0 1px var(--w-leaf-200, #cfe4d8), inset 0 4px 0 var(--w-leaf-700, #23684a);
}
body.hwreveal .doc-wrap .doc .cycles .cyc > section.cyc__band::after,
body.hwreveal .doc-wrap .doc .cycles .cyc > section.cyc__band > .part-mark { display: none; }
/* stacked (no script, print), a prototype after the first opens with air */
body.hwreveal .doc-wrap .doc .cycles .cyc + .cyc > section.cyc__band:first-child,
body.hwreveal .doc-wrap .doc .cycles .cyc-group .cyc > section.cyc__band:first-child { margin-top: 0; }
.cycles .cyc + .cyc, .cycles .cyc-group + .cyc-group { margin-top: 3.5rem; }
.cycles .cyc-group > .cyc { margin-top: 2.5rem; }
/* behind a bar, the one showing starts right under it */
.doc .cycles .has-tabs > .cyc, .doc .cycles.has-tabs > .cyc { margin-top: 0; }
@media print { .doc .cycles .has-tabs > .cyc + .cyc, .doc .cycles.has-tabs > .cyc + .cyc { margin-top: 3.5rem; } }

/* the card under the band: every section after it, joined into one */
body.hwreveal .doc-wrap .doc .cycles .cyc > section.sec:not(.cyc__band) {
  margin-top: 0; margin-bottom: 0;
  border-radius: 0;
  box-shadow: inset 0 1px 0 rgb(0 0 0 / .06);
}
body.hwreveal .doc-wrap .doc .cycles .cyc > section.sec:last-of-type { border-radius: 0 0 28px 28px; }
body.hwreveal .doc-wrap .doc .cycles .cyc > section.cyc__band:last-of-type { border-radius: 28px; }
@media (max-width: 600px) {
  body.hwreveal .doc-wrap .doc .cycles .cyc > section.cyc__band { border-radius: 22px 22px 0 0; }
  body.hwreveal .doc-wrap .doc .cycles .cyc > section.sec:last-of-type { border-radius: 0 0 22px 22px; }
  body.hwreveal .doc-wrap .doc .cycles .cyc > section.cyc__band:last-of-type { border-radius: 22px; }
}

/* the band's title, whatever its level (h2 on the LPA, h3, or h4 under a
   group's h3 on the bioreactor) */
body.hwreveal .doc-wrap .doc .cycles .cyc__band .dbtl-head :is(h2, h3, h4) {
  display: block;
  margin: 0; padding: 0; border: 0;
  font-size: clamp(1.35rem, 1.05rem + .9vw, 1.75rem);   /* one step below the part's title (W6 R2, V16) */
  font-weight: 750; line-height: 1.1; letter-spacing: -.022em;
  color: var(--w-leaf-900, #14402b);
  text-transform: none;
  text-wrap: balance;
}
body.hwreveal .doc-wrap .doc .cycles .cyc__band .dbtl-head :is(h2, h3, h4) > i {
  display: inline-block;
  margin: 0 .45rem 0 0; padding: .2em .55em;
  border-radius: 999px;
  font-size: .5em; font-style: normal; font-weight: 650; letter-spacing: .01em;
  vertical-align: .35em;
  color: var(--pl, var(--w-leaf-700)); background: color-mix(in srgb, var(--pl, #23684a) 13%, #fff);
}
.dbtl-head .dbtl-pre {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
body.hwreveal .doc-wrap .doc .cycles .cyc__band .dbtl-kick {
  max-width: none; margin: 0 0 .4rem;
  font: 700 .8125rem/1.25 var(--sans, inherit); letter-spacing: .1em; text-transform: uppercase;
  color: var(--w-leaf-700, #23684a);
}
body.hwreveal .doc-wrap .doc .cycles .cyc__band .dbtl-kick span { color: #5f6b78; font-weight: 600; }
body.hwreveal .doc-wrap .doc .cycles .cyc.is-todo .cyc__band .dbtl-kick { color: #9a3412; }
body.hwreveal .doc-wrap .doc .cycles .cyc__band .dbtl-gist {
  margin: .5rem 0 0; max-width: 62ch;
  font-size: .9375rem; line-height: 1.5; color: var(--w-ink-3);
}
/* the stage list sits in a card whose own list and link rules (width cap,
   bullets, underlines) are for prose, not for this */
body.hwreveal .doc-wrap .doc .cycles .cyc__band ol.dbtl-steps {
  width: auto; max-width: none; margin: 1.3rem 0 0; padding: 0; list-style: none;
}
body.hwreveal .doc-wrap .doc .cycles .cyc__band ol.dbtl-steps > li {
  margin: 0; padding: 0; max-width: none; list-style: none; border: 0; background: none;
}
body.hwreveal .doc-wrap .doc .cycles .cyc__band ol.dbtl-steps > li::marker { content: ""; }
body.hwreveal .doc-wrap .doc .cycles .cyc__band ol.dbtl-steps a,
body.hwreveal .doc-wrap .doc .cycles .cyc__band ol.dbtl-steps a :is(span, em) {
  text-decoration: none; background-image: none;
}
/* The card itself, whole here: wiki-align.css draws it only under
   body.doc-light, which polish.js sets on scroll, so before that (or if
   polish.js stops early) the box lost its grid and its border. And the
   record's link rule draws an amber underline as a bottom border. */
body.hwreveal .doc-wrap .doc .cycles .cyc__band ol.dbtl-steps a {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .6rem; align-items: start;
  height: 100%; box-sizing: border-box;
  padding: .65rem .75rem; border-radius: .375rem;
  background: #fff; border: 1px solid var(--w-line, #e5e5e5);
  color: #262626;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
body.hwreveal .doc-wrap .doc .cycles .cyc__band ol.dbtl-steps a > span { display: block; font-size: .875rem; line-height: 1.4; color: #4a5560; }
body.hwreveal .doc-wrap .doc .cycles .cyc__band ol.dbtl-steps a > span em {
  display: block; font-style: normal; font-weight: 700; font-size: .9375rem; color: var(--w-leaf-900, #14402b);
}
body.hwreveal .doc-wrap .doc .cycles .cyc__band ol.dbtl-steps li.gap a { background: #fff7f2; }
body.hwreveal .doc-wrap .doc .cycles .cyc__band ol.dbtl-steps li.gap a > span { color: #9a3412; }
@media (prefers-reduced-motion: reduce) { body.hwreveal .doc-wrap .doc .cycles .cyc__band ol.dbtl-steps a { transition: none; } }
body.hwreveal .doc-wrap .doc .cycles .cyc__band ol.dbtl-steps a:is(:hover, :focus-visible) { border-color: var(--w-leaf-500, #4f9c6f); background: var(--w-leaf-50, #f4f9f6); transform: translateY(-1px); }
body.hwreveal .doc-wrap .doc .cycles .cyc__band ol.dbtl-steps li.gap a { border-color: #fdba8c; }
/* Phones: wiki-align.css puts the ring beside the kicker and an h2 under
   both; the title here may be an h3 or h4 and may have a line under it, so
   each is given its place, or they fall into the kicker's narrow column. */
@media (max-width: 700px) {
  body.hwreveal .doc-wrap .doc .cycles .cyc__band .dbtl-head :is(h2, h3, h4) { grid-area: h2; }
  body.hwreveal .doc-wrap .doc .cycles .cyc__band .dbtl-head .dbtl-gist { grid-area: gist; margin: 0; }
  body.hwreveal .doc-wrap .doc .cycles .cyc__band .dbtl-kick { font-size: .75rem; letter-spacing: .08em; }
}
/* the ring carries the prototype's number alone; the kicker says what it is */
.cyc__band .dbtl-ring > b { margin-top: 0; }
/* the four stages: each in its own column, so a missing one leaves its gap */
.cyc__band ol.dbtl-steps > li.d { grid-column: 1; }
.cyc__band ol.dbtl-steps > li.b { grid-column: 2; }
.cyc__band ol.dbtl-steps > li.t { grid-column: 3; }
.cyc__band ol.dbtl-steps > li.l { grid-column: 4; }
/* the joining dash only between two stages that sit side by side */
.cyc__band ol.dbtl-steps > li + li::before { display: none; }
@media (min-width: 701px) {
  .cyc__band ol.dbtl-steps > li.d + li.b::before,
  .cyc__band ol.dbtl-steps > li.b + li.t::before,
  .cyc__band ol.dbtl-steps > li.t + li.l::before { display: block; }
}
@media (max-width: 700px) {
  .cyc__band ol.dbtl-steps > li { grid-column: auto !important; }
}
/* a prototype outlined but not written: an orange band, no stages */
body.hwreveal .doc-wrap .doc .cycles .cyc.is-todo > section.cyc__band {
  background: linear-gradient(180deg, #fff7f2, #fff 85%);
  box-shadow: inset 0 0 0 1px #fde0cc, inset 0 4px 0 #fdba8c;
}
.cyc.is-todo .dbtl-ring { filter: saturate(.25) opacity(.55); }
body.hwreveal .doc-wrap .doc .cycles .cyc.is-todo .cyc__band .dbtl-head :is(h2, h3, h4) { color: var(--w-ink-2); }
body.hwreveal .doc-wrap .doc .cycles .cyc__band > .todo { margin: 1.1rem 0 0; }

/* ---- a stage inside the card ----------------------------------------------- */
/* D, B, T or L in the ring's colour for that quarter, the name, a hairline */
body.hwreveal .doc-wrap .doc .cycles .cyc :is(h3, h4, h5).dbtl-h {
  display: flex; align-items: center; gap: .65rem;
  margin: 2.1rem 0 .9rem; padding: 0; border: 0;
  font-family: var(--sans, inherit);
  font-size: .8125rem; font-weight: 700; line-height: 1.2; letter-spacing: .12em; text-transform: uppercase;
  color: var(--w-leaf-900, #14402b);
}
body.hwreveal .doc-wrap .doc .cycles .cyc :is(h3, h4, h5).dbtl-h::before {
  content: "D"; flex: none;
  display: grid; place-items: center;
  width: 1.625rem; height: 1.625rem; border-radius: 50%;
  font-size: .75rem; letter-spacing: 0; color: #fff; background: var(--dq-d);
}
body.hwreveal .doc-wrap .doc .cycles .cyc .dbtl-h.b::before { content: "B"; background: var(--dq-b); }
body.hwreveal .doc-wrap .doc .cycles .cyc .dbtl-h.t::before { content: "T"; background: var(--dq-t); }
body.hwreveal .doc-wrap .doc .cycles .cyc .dbtl-h.l::before { content: "L"; background: var(--dq-l); }
body.hwreveal .doc-wrap .doc .cycles .cyc :is(h3, h4, h5).dbtl-h::after {
  content: ""; flex: 1; height: 1px; background: rgb(0 0 0 / .1);
}
body.hwreveal .doc-wrap .doc .cycles .cyc section.sec > .dbtl-h:first-child,
body.hwreveal .doc-wrap .doc .cycles .cyc .iter-body > .dbtl-h:first-child { margin-top: 0; }

/* ---- a reading table inside a prototype, on a phone ----------------------- */
/* The photometer's readings tables (prototypes 2 and 3) carried the record's
   560px table floor, so at 390px they ran ~600px wide past the card. On a
   phone they reflow to the card instead: the headers wrap, the numbers stay
   on one line, and the frame still scrolls inside itself as a last resort. */
@media (max-width: 700px) {
  .doc :is(.cycles, .hw-result) .tablewrap { max-width: 100%; overflow-x: auto; }
  .doc :is(.cycles, .hw-result) .tablewrap > table { min-width: 0; width: 100%; font-size: .78rem; }
  .doc :is(.cycles, .hw-result) .tablewrap > table :is(th, td) { padding-right: .45rem; white-space: normal; overflow-wrap: anywhere; }
  .doc :is(.cycles, .hw-result) .tablewrap > table td.num { white-space: nowrap; overflow-wrap: normal; }
  /* 18 Oct 2026: the long run (photometer 4.1) left the cycles for Results and keeps this */
  .doc .cycles .tablewrap > table td .todo { display: block; margin: .2rem 0 0; white-space: normal; }
}

/* ---- "Next" at the foot of a prototype ------------------------------------ */
/* Made by hwdoc.js for every prototype but the last of its group: the way on
   for a reader who would rather go in order, in the bar's slate. */
.doc .cyc-next {
  display: flex; justify-content: flex-end;
  margin: 1rem calc(-1 * var(--bleed, 0px)) 0; padding: 0;
}
.doc .cyc-next a {
  display: inline-flex; align-items: baseline; flex-wrap: wrap; justify-content: center; gap: .2rem .5rem;
  max-width: 100%;
  padding: .55rem 1.1rem;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgb(63 90 102 / .28);
  color: var(--w-ink-2);
  font-size: .9375rem; line-height: 1.3; text-decoration: none; text-align: center;
  transition: box-shadow .2s ease, color .2s ease, background-color .2s ease;
}
.doc .cyc-next a:hover, .doc .cyc-next a:focus-visible { background: var(--w-tab-pill, #e3eef2); box-shadow: inset 0 0 0 1.5px var(--w-tab, #3f5a66); }
.doc .cyc-next a:focus-visible { outline: 2px solid var(--w-tab, #3f5a66); outline-offset: 2px; }
.cyc-next__lead { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--w-tab, #3f5a66); }
.cyc-next__t { font-weight: 600; color: var(--w-ink); }
.doc .cyc-next i { font-style: normal; font-weight: 700; color: var(--w-tab, #3f5a66); }
@media (prefers-reduced-motion: reduce) { .doc .cyc-next a { transition: none; } }


/* ============================================================ 5 THE READING ==
   One section, one card
   -----------------------------------------------------------------------------
   11 Oct 2026. With the instrument strip and the record's own title block
   gone, a chapter is the summary sheet, the control, and then writing. The
   writing was a single column of same-weight paragraphs under green headings,
   with the text set to a narrower measure than the figures between it, so a
   chapter read as one long grey ribbon with a ragged right edge and nothing to
   say where one numbered section stopped and the next began.

   Each numbered section (`section.sec`) is now a pale rounded card, the card
   the Engagement pages use, with its number as a chip in the chapter's own
   colour and its heading in ink. Figures, tables and folds sit inside it as
   white sheets. On a wide window the card bleeds into the gutters by exactly
   its own padding, so everything inside it is as wide as it was before:
   nothing of Anton's is resized. The chapter's part header loses its two
   rules and becomes the chapter's title.

   Every selector starts `body.hwreveal .doc-wrap .doc`: wiki-align.css styles
   the same prose with `body.doc-light .doc-wrap section.sec > p`, and this has
   to outrank it without an !important.
   ========================================================================== */

body.hwreveal .doc-wrap .doc {
  --card-pad: clamp(1.1rem, .55rem + 2vw, 2rem);
  --bleed: 0px;
  padding-top: 3.25rem;
}
@media (min-width: 1320px) {
  body.hwreveal .doc-wrap .doc { --card-pad: 2rem; --bleed: 2rem; }
  /* the rail keeps clear of the card that now reaches into its gutter */
  body.hwreveal .doc-wrap .doc-nav { padding-right: 3.75rem; }
}
@media (max-width: 600px)  { body.hwreveal .doc-wrap .doc { --bleed: .4rem; padding-top: 2.25rem; } }

/* ---- the chapter's title -------------------------------------------------- */
body.hwreveal .doc-wrap .doc section.part {
  min-height: 0;          /* hydroponics held 234px open above each title */
  margin: 0 0 1.5rem;
  padding: 0;
  border: 0;
}
/* Every part after the first opens on a hairline and some air: it is the one
   mark, in one continuous scroll, of where a numbered section starts. The
   parts sit in their old chapter wrappers (.chap, which carry the colour) or
   flat in the record; the first one meets the summary sheet and needs
   neither. */
body.hwreveal .doc-wrap .doc .chap > section.part,
body.hwreveal .doc-wrap .doc > section.part {
  margin-top: 4rem;
  padding-top: 3rem;
  border-top: 1px solid rgb(0 0 0 / .08);
}
body.hwreveal .doc-wrap .doc .chaps > .chap:first-child > section.part:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
body.hwreveal .doc-wrap .doc section.part > .part-mark {
  margin: 0 0 .55rem;
  color: var(--pl);
}
body.hwreveal.doc-light .doc-wrap .doc section.part > .part-mark span,
body.hwreveal.doc-light .doc-wrap .doc section.part > .part-mark b { color: inherit; }
body.hwreveal .doc-wrap .doc section.part > h2 {
  font-size: clamp(1.85rem, 1.35rem + 1.7vw, 2.5rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.028em;
  color: var(--w-ink);
  text-wrap: balance;
}

/* ---- the card -------------------------------------------------------------- */
body.hwreveal .doc-wrap .doc section.sec {
  margin: 0 calc(-1 * var(--bleed)) 1.25rem;
  padding: calc(var(--card-pad) * .92) var(--card-pad) var(--card-pad);
  border-radius: 28px;
  background: var(--w-well);
}
body.hwreveal .doc-wrap .doc section.sec > :last-child { margin-bottom: 0; }
body.hwreveal .doc-wrap .doc section.sec > :first-child { margin-top: 0; }
@media (max-width: 600px) { body.hwreveal .doc-wrap .doc section.sec { border-radius: 22px; } }

/* the number is a chip, the name is ink */
body.hwreveal .doc-wrap .doc section.sec > h3 {
  display: flex;
  align-items: baseline;
  gap: .7rem;
  margin: 0 0 1.05rem;
  padding: 0;
  border: 0;
  font-size: clamp(1.25rem, 1.1rem + .5vw, 1.4375rem);
  font-weight: 650;
  line-height: 1.22;
  letter-spacing: -.02em;
  color: var(--w-ink);
}
body.hwreveal .doc-wrap .doc section.sec > h3 > i {
  flex: none;
  margin: 0;
  padding: .26em .62em .24em;
  border-radius: 999px;
  font-size: .8125rem;
  font-style: normal;
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
  color: var(--pl);
  background: color-mix(in srgb, var(--pl) 13%, #fff);
  transform: translateY(-.16em);
}

/* ---- the prose ------------------------------------------------------------- */
body.hwreveal .doc-wrap .doc section.sec > p,
body.hwreveal .doc-wrap .doc section.part > p {
  max-width: 68ch;
  margin: 0 0 1rem;
  font-size: 1.0625rem;
  line-height: 1.7;
  letter-spacing: -.004em;
  color: #2b2b2e;
  text-wrap: pretty;
}
body.hwreveal .doc-wrap .doc section.sec > p strong,
body.hwreveal .doc-wrap .doc section.sec > ul > li strong,
body.hwreveal .doc-wrap .doc section.sec > ol > li strong { font-weight: 650; color: var(--w-ink); }

/* ---- what sits inside a card ---------------------------------------------- */
/* the card is the pale thing now, so what it holds is white */
body.hwreveal .doc-wrap .doc section.sec .fold { background: #fff; }
body.hwreveal .doc-wrap .doc section.sec .hwcard { background: #fff; }
body.hwreveal .doc-wrap .doc section.sec .hwcard .fold { background: var(--w-well); }
body.hwreveal .doc-wrap .doc section.sec > figure,
body.hwreveal .doc-wrap .doc section.sec > .frames > figure {
  border-color: rgb(0 0 0 / .07);
  border-radius: 20px;
}
body.hwreveal .doc-wrap .doc section.sec > figure { margin: 1.5rem auto; }   /* narrow figures centred (W6 R2, V6) */
body.hwreveal .doc-wrap .doc section.sec > .folds { margin-top: 1.25rem; }

/* Panels that were pale on a white page are white on a pale card: the same
   step of contrast, the other way round. --hw-surface is what a panel inside
   a section paints with, so the one section that is not a card (below) can
   hand its panels their old ground back. */
body.hwreveal .doc-wrap .doc section.sec { --hw-surface: #fff; }
body.hwreveal .doc-wrap .doc section.sec :is(.rel-card, .circuit, .track, .chart-fig, .asm-kit, .spart, .bom-search),
body.hwreveal .doc-wrap .doc section.sec .params .param:not(.prio) { background: var(--hw-surface); }
body.hwreveal .doc-wrap .doc section.sec .params .param:not(.prio) .openitem { background: var(--w-well); }

/* A figure built to break out of the old column sits inside the card instead. */
body.hwreveal .doc-wrap .doc section.sec figure.feature {
  width: auto;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* The bioreactor's walkthrough of the loop (2.5) is a scroll scene two
   columns wide: its diagram stands to the right of the record's column and
   stays pinned while eight captions pass. That is a stage, not a passage of
   writing, and a card drawn round half of it cuts the diagram in two. This
   one section keeps the open page. */
body.hwreveal .doc-wrap .doc section.sec:has(.syswalk) {
  --hw-surface: var(--w-well);
  margin-left: 0;
  margin-right: 0;
  padding: 1.5rem 0 0;
  border-radius: 0;
  background: none;
}


/* ======================================================= 6 AFTER THE TWIN ==
   17 Oct 2026. A modest layout pass after the digital twin page
   (releaf-wiki/software/), which the instructor polished and the owner holds
   up as the clean one: "take some inspirations for layout ... still don't
   change too much". The record keeps its own words (more of them than the
   twin's), its fonts, its colours, the dark heroes, the Back button and the
   Summary card. What it borrows is the twin's furniture:
     - a part opens on its number in leaf green and its title in dark
       forest, on one line, with a hairline under the pair and air above;
     - the contents rail is quieter: no filled pill, the part being read in
       dark forest with its number in green;
     - tables sit in a white card with a tinted header and roomier rows;
     - captions are set one way everywhere, smaller and quieter than the
       text, as the twin's are.
   Every rule is scoped like section 5's, so nothing reaches the stage.
   ========================================================================== */

/* ---- a part's heading: "5.  Calibration" -------------------------------- */
/* The number is the part's own data-n, the one the rail shows, drawn in the
   ::before the giant outlined numeral used to occupy (polish.css; the light
   record had already put that one away). The "Part 5" kicker said the same
   thing above the title, so it goes. The bioreactor's part 1 is the page's
   title block (its h1) and keeps its own look. */
body.hwreveal .doc-wrap .doc section.part:not(.br-overview) {
  --part-size: clamp(1.65rem, 1.2rem + 1.45vw, 2.25rem);
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-start;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--w-line, #e5e5e5);
}
body.hwreveal .doc-wrap .doc section.part:not(.br-overview)::before {
  content: attr(data-n) ".";
  position: static;
  display: block;
  flex: none;
  min-width: 1.45em;
  margin: 0 .5em 0 0;
  transform: none;
  font-family: inherit;
  font-size: var(--part-size);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--w-leaf-500, #4f9c6f);
  -webkit-text-stroke: 0;
  opacity: 1;
  pointer-events: none;
}
body.hwreveal .doc-wrap .doc section.part:not(.br-overview) > .part-mark { display: none; }
body.hwreveal .doc-wrap .doc section.part:not(.br-overview) > h2 {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  font-size: var(--part-size);
  color: var(--w-leaf-900, #14402b);
}
/* Anton's scan line runs along the hairline now, not under it */
body.hwreveal .doc-wrap .doc section.part::after { bottom: -1px; }
/* The air above a part replaces the rule that used to sit there. It must
   outrank the photometer's `body.doc-light[data-instrument] ...
   .part:first-of-type { margin-top: 0 }`, which every part matches, since
   each is the first section in its chapter wrapper: until tonight the old
   rule's padding hid that. */
body.hwreveal .doc-wrap .doc .chap > section.part:not(.br-overview),
body.hwreveal .doc-wrap .doc > section.part:not(.br-overview) {
  margin-top: 5.5rem;
  padding-top: 0;
  border-top: 0;
}
body.hwreveal .doc-wrap .doc .chaps > .chap:first-child > section.part:first-of-type { margin-top: 0; }
@media (max-width: 600px) {
  body.hwreveal .doc-wrap .doc .chap > section.part:not(.br-overview),
  body.hwreveal .doc-wrap .doc > section.part:not(.br-overview) { margin-top: 4rem; }
  body.hwreveal .doc-wrap .doc section.part:not(.br-overview)::before { min-width: 0; margin-right: .4em; }
}

/* ---- the contents rail, quieter ------------------------------------------ */
/* The twin's "On this page": a small-capital label, a plain numbered list,
   and the part being read picked out by weight and colour, not a filled
   pill. Behaviour is hwdoc.js's, unchanged: the current part still unfolds
   its sub-headings and the rail still follows the reader. */
body.doc-light .doc-nav .doc-nav-label {
  font-family: var(--sans, inherit);
  font-size: .6875rem;
  font-weight: 650;
  letter-spacing: .16em;
  color: var(--w-ink-3, #6e6e73);
}
body.doc-light .doc-nav .hwtoc__h { color: #5f6b74; }
body.doc-light .doc-nav .hwtoc__no { color: #a3adb4; font-weight: 500; }
/* the page's rail links are flex rows (style.css), so a one-digit number
   would pull its label left of a two-digit one's: a fixed column keeps the
   labels in line */
.doc-nav .hwtoc__no { flex: none; min-width: 1.05rem; }
body.doc-light .doc-nav .hwtoc__h:hover { color: var(--w-leaf-900, #14402b); background: rgb(20 64 43 / .04); }
body.doc-light .doc-nav .hwtoc__sec.is-here > .hwtoc__h {
  color: var(--w-leaf-900, #14402b);
  font-weight: 650;
  background: none;
}
body.doc-light .doc-nav .hwtoc__sec.is-here > .hwtoc__h .hwtoc__no { color: var(--w-leaf-500, #4f9c6f); font-weight: 650; }
body.doc-light .doc-nav .hwtoc__sub a:hover,
body.doc-light .doc-nav .hwtoc__sub a.is-active { color: var(--w-leaf-900, #14402b); }

/* ---- tables in a white card ---------------------------------------------- */
/* The twin's: a hairline card with rounded corners, a tinted header row and
   rows with room between them, so a table reads as one object, the way the
   record's figures already do. Ours keeps the team's leaf tint and sentence
   case in the header: the headers carry units, and capitals would turn mL
   into ML. (DiOPAL's `.plain` only drops a corner bracket, so it is
   included.) The photometer's tables sit in a card of their own
   (.tablewrap, its page's CSS) and are left as they are. */
body.doc-light .doc-wrap .doc .sec .table-scroll:has(> table) {
  border: 1px solid var(--w-line, #e5e5e5);
  border-radius: 14px;
  background: #fff;
}
body.doc-light .doc-wrap .doc .sec .table-scroll:has(> table) > table { margin: 0; }
body.doc-light .doc-wrap .doc .sec .table-scroll:has(> table) > table :is(th, td) { padding-left: 1rem; padding-right: 1rem; }
body.doc-light .doc-wrap .doc .sec .table-scroll:has(> table) > table td { padding-top: .8rem; padding-bottom: .8rem; }
body.doc-light .doc-wrap .doc .sec .table-scroll:has(> table) > table > tbody > tr:last-child > td { border-bottom: 0; }
/* a table's own caption is inside the card now, so it takes the cells' inset */
body.doc-light .doc-wrap .doc .sec .table-scroll:has(> table) > table > caption { padding: .8rem 1rem .55rem; }

/* ---- captions, one way everywhere ---------------------------------------- */
body.doc-light .doc-wrap .doc figcaption {
  font-size: .875rem;
  line-height: 1.55;
  color: var(--w-ink-2, #424245);
}
body.doc-light .doc-wrap .doc figcaption > b { color: var(--w-ink, #1d1d1f); }

/* ---- a track's way back to the cycle map ---------------------------------- */
/* on the bioreactor it was the browser's own blue; the photometer's rule,
   shared */
.doc .cyc-group > p.to-map { margin: 1.25rem 0 0; font-size: .9375rem; }
body.doc-light .doc .cyc-group > p.to-map a {
  color: var(--w-link, #23684a);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2.7px;
}

/* ==========================================================================
   7. W6 visual review (17 Oct 2026, overnight; dev/night-logs/2026-10-17-overnight/REVIEW-visual.md). Each rule was
   checked before/after in headless Chrome on the photometer and the bioreactor.
   ========================================================================== */
/* V5: over the light record the dark menu is a solid strip, not a fade with the record's text showing through */
body.doc-light .sitenav--dark.is-scrolled .sitenav__bar::before { height: var(--nv-h, 68px); background: rgb(8 10 14 / .94); }

/* V14: on a phone, a fold's note goes under its title instead of squeezing it into a narrow column */
@media (max-width: 600px) {
  .doc .fold > summary { flex-wrap: wrap; row-gap: .2rem; }
  .doc .fold > summary .fold__t { flex: 1 1 100%; }
  .doc .fold > summary .fold__sub { margin-left: 0; white-space: normal; }
}

/* V17: the summary's number strip sits on the card's floor, level with the foot of the Results list */
@media (min-width: 980px) {
  .hwsum__inner { align-items: stretch; }
  .hwsum__story { grid-row: 1 / span 2; display: flex; flex-direction: column; }
  .hwsum__story > .hwsum__spec { margin-top: auto; padding-top: var(--sp-5, 2rem); }
}

/* V18: a to-do block is as wide as the cards and figures around it (it was capped at 68ch) */
body.hwreveal .doc-wrap .doc section.sec > p.todo { max-width: none; }

/* ==========================================================================
   8. A stage's one photo beside its text (17 Oct 2026)
   --------------------------------------------------------------------------
   The owner: "When doing the dbtl cycles, most of the time you have an image
   below the text, which takes up a lot of unnecessary space. I want to try
   moving the photos to the left of the text, or the right, whichever looks
   better ... If there is more than one photo then maybe don't put it like
   that."

   A design, build, test or learn stage whose text is followed by one photo
   wraps the two in .dbtl-split (dev/dbtl-photos/dbtl_split.py does the
   wrapping and proves that nothing else moved). Wider than a phone, the photo
   stands to the LEFT of its text, top-aligned, in two fifths of the card,
   with its caption under it. Left is where every other picture beside text on
   these pages already stands (each final design's 3D model, the LPA's first
   build photo), and a mixed side would read as an accident. A tall portrait
   photo beside a short paragraph takes 35% (--narrow), so it does not run far
   below its text. The markup keeps the text first, so a phone (700px and
   under) stacks the stage as before: text, then the photo.

     <div class="dbtl-split [dbtl-split--narrow]">
       <div class="dbtl-split__text"> the stage's paragraphs </div>
       <figure class="frame ..."> the one photo </figure>
     </div>

   Left as they were: stages with two or more photos, wide strips, and charts
   or blots whose labels need the card's width.

   The text and the figure are no longer children of section.sec, so the two
   section 5 rules they lost (the prose, and a figure in a card) are repeated
   here at the same weight, and a phone sees them exactly as before. On a wide
   screen the photo's own size rules, some of them on its id in the page's
   stylesheet, give way to the column: !important on width, max-width and
   margin only.
   ========================================================================== */
body.hwreveal .doc-wrap .doc div.dbtl-split { margin: 0 0 1rem; }
body.hwreveal .doc-wrap .doc div.dbtl-split__text > p {
  max-width: 68ch;
  margin: 0 0 1rem;
  font-size: 1.0625rem;
  line-height: 1.7;
  letter-spacing: -.004em;
  color: #2b2b2e;
  text-wrap: pretty;
}
body.hwreveal .doc-wrap .doc div.dbtl-split__text > p strong { font-weight: 650; color: var(--w-ink); }
body.hwreveal .doc-wrap .doc div.dbtl-split > figure {
  border-color: rgb(0 0 0 / .07);
  border-radius: 20px;
  margin: 1.5rem auto;
}
/* the photo keeps its own shape: no fixed-ratio well, nothing cropped away */
body.hwreveal .doc-wrap .doc div.dbtl-split > figure .frame-img { aspect-ratio: auto; height: auto; }
body.hwreveal .doc-wrap .doc div.dbtl-split > figure .frame-img img { display: block; width: 100%; height: auto; object-fit: contain; }

@media (min-width: 701px) {
  body.hwreveal .doc-wrap .doc div.dbtl-split {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    column-gap: clamp(1.5rem, .75rem + 1.5vw, 2.25rem);
    align-items: start;
  }
  body.hwreveal .doc-wrap .doc div.dbtl-split--narrow { grid-template-columns: minmax(0, 7fr) minmax(0, 13fr); }
  body.hwreveal .doc-wrap .doc div.dbtl-split > .dbtl-split__text { grid-column: 2; grid-row: 1; min-width: 0; }
  body.hwreveal .doc-wrap .doc div.dbtl-split__text > :last-child { margin-bottom: 0; }
  body.hwreveal .doc-wrap .doc div.dbtl-split > figure {
    grid-column: 1;
    grid-row: 1;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
  }
}

/* 18 Oct 2026 (final night): a table inside an open fold must not widen the folds grid on a phone (found on hydroponics). */
body.hwreveal .doc-wrap .doc .folds > .fold { min-width: 0; }

/* ==========================================================================
   9. Results: one card per result, opening on a one-line summary (18 Oct 2026)
   --------------------------------------------------------------------------
   The owner: "I want to create a new section right under dbtls called
   'Results,' where we put the most prominent successes ... For each 'result'
   we want to start it with a one line summary of the result, then get into
   the details. This line should be in a box kind of highlighted."

   Every instrument page has a part "Results" straight after its engineering
   cycles. Each result is one div.hw-result; its first card is the result's
   head, its h3 then the summary box, and the details follow in the same card
   or in the cards after it (the photometer's calibration keeps its five
   sections as cards of their own, numbered 4.2.1-4.2.5 in h4s).

     <div class="hw-result">
       <section class="sec hw-result__card" id="...">
         <h3><i>4.1</i> Title</h3>
         <p class="hw-result__line">The result, in one sentence, with its number.</p>
         <h5 class="hw-result__h">The Run</h5> ... details ...
       </section>
       [<section class="sec"><h4 class="hw-result__sub"><i>4.2.1</i> ...</h4> ...</section> ...]
     </div>

   The summary box is the cycles' leaf band in small: a pale leaf panel, a
   hairline ring and a leaf accent down its left edge, the sentence in dark
   leaf at a size between the prose and the card's title. An empty box (a
   result the owner has still to write) keeps its height, so the shell reads
   as a place to fill, not as a gap.
   ========================================================================== */
.doc .hw-result { margin: 0 0 2.75rem; }
.doc .hw-result:last-child { margin-bottom: 0; }
body.hwreveal .doc-wrap .doc .hw-result > section.sec + section.sec { margin-top: .9rem; }

body.hwreveal .doc-wrap .doc section.sec > p.hw-result__line {
  max-width: none;
  margin: 0 0 1.75rem;
  padding: 1rem 1.3rem 1.05rem 1.45rem;
  border-radius: 16px;
  background: linear-gradient(180deg, var(--w-leaf-50, #f4f9f6), color-mix(in srgb, var(--w-leaf-100, #e3f0e8) 70%, #fff));
  box-shadow: inset 0 0 0 1px var(--w-leaf-200, #cfe4d8), inset 4px 0 0 var(--w-leaf-700, #23684a);
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  font-weight: 560;
  line-height: 1.5;
  letter-spacing: -.008em;
  color: var(--w-leaf-900, #14402b);
  text-wrap: pretty;
}
body.hwreveal .doc-wrap .doc section.sec > p.hw-result__line:last-child { margin-bottom: 0; }
body.hwreveal .doc-wrap .doc section.sec > p.hw-result__line:empty { min-height: 3.4rem; }
body.hwreveal .doc-wrap .doc section.sec > p.hw-result__line i { color: inherit; }
.doc .hw-result__body:empty { display: none; }

/* a detail's heading inside a result: the stage label of the cycles, without the D/B/T/L disc */
body.hwreveal .doc-wrap .doc section.sec > :is(h4, h5).hw-result__h {
  display: flex; align-items: center; gap: .65rem;
  margin: 2.1rem 0 .9rem; padding: 0; border: 0;
  font-family: var(--sans, inherit);
  font-size: .8125rem; font-weight: 700; line-height: 1.2; letter-spacing: .12em; text-transform: uppercase;
  color: var(--w-leaf-900, #14402b);
}
body.hwreveal .doc-wrap .doc section.sec > :is(h4, h5).hw-result__h::before {
  content: ""; flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: var(--w-leaf-700, #23684a);
}
body.hwreveal .doc-wrap .doc section.sec > :is(h4, h5).hw-result__h::after { content: ""; flex: 1; height: 1px; background: rgb(0 0 0 / .1); }
body.hwreveal .doc-wrap .doc section.sec > p.hw-result__line + :is(h4, h5).hw-result__h { margin-top: 0; }

/* a numbered part of a result (4.2.1): the card title's chip and ink, a step smaller */
body.hwreveal .doc-wrap .doc section.sec > h4.hw-result__sub {
  display: flex; align-items: baseline; gap: .65rem;
  margin: 0 0 1rem; padding: 0; border: 0;
  font-size: clamp(1.125rem, 1.05rem + .3vw, 1.25rem); font-weight: 650; line-height: 1.25; letter-spacing: -.015em;
  color: var(--w-ink);
}
body.hwreveal .doc-wrap .doc section.sec > h4.hw-result__sub > i {
  flex: none; padding: .24em .58em .22em; border-radius: 999px;
  font-size: .75rem; font-style: normal; font-weight: 650; line-height: 1.15; letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
  color: var(--pl); background: color-mix(in srgb, var(--pl) 13%, #fff);
  transform: translateY(-.14em);
}
/* a result's own small table (the LPA's arms) */
body.hwreveal .doc-wrap .doc .hw-result .tablewrap { margin: 1.25rem 0; }
/* sub- and superscripts in the summary (TiO2, R2) must not open the line */
body.hwreveal .doc-wrap .doc section.sec > p.hw-result__line :is(sub, sup) { line-height: 0; }
/* a chart drawn elsewhere and kept as one image (the LPA's growth fit): a white sheet, the image at its own shape */
body.hwreveal .doc-wrap .doc section.sec > figure.hw-result__fig {
  margin: 1.5rem 0; padding: clamp(.6rem, .3rem + 1vw, 1rem) clamp(.6rem, .3rem + 1vw, 1rem) .9rem;
  border: 1px solid rgb(0 0 0 / .07); border-radius: 20px; background: #fff;
}
.doc figure.hw-result__fig > img { display: block; width: 100%; height: auto; }
.doc figure.hw-result__fig > figcaption { margin-top: .75rem; }
body.hwreveal .doc-wrap .doc section.sec > p.hw-result__line:has(+ .hw-result__body:empty:last-child) { margin-bottom: 0; }

/* ---- progress under the bar, and the way back to 1 (19 Oct 2026) ----------
   Each group opens on its final prototype (hwdoc.js, START_LAST). One thin
   segment per prototype just under the pill, filled up to the one showing, so
   "4 of 4" reads at a glance; and, until the reader picks a tab, a small
   "Start at 1" under it. Hidden while the bar is pinned over the text. */
.cyc-prog {
  position: absolute; left: 1.4rem; right: 1.4rem; top: calc(100% + 6px);
  display: flex; gap: 4px; height: 3px; pointer-events: none;
}
.cyc-prog i {
  flex: 1 1 0; border-radius: 3px; background: rgb(63 90 102 / .16);
  transition: background-color .35s var(--ease, ease);
}
.cyc-prog i.is-on { background: var(--w-tab, #3f5a66); }
.doc .cyc-hint {
  position: absolute; left: 1rem; top: calc(100% + 15px);
  display: inline-flex; align-items: center; gap: .35rem;
  margin: 0; padding: .2rem .7rem .22rem .55rem; border: 0; border-radius: 999px;
  background: var(--w-tab-pill, #e3eef2); color: var(--w-tab, #3f5a66);
  font: inherit; font-size: .8125rem; font-weight: 600; line-height: 1.3; cursor: pointer;
  transition: background-color .2s ease, color .2s ease, opacity .2s ease;
}
.doc .cyc-hint i { font-style: normal; font-weight: 700; }
.doc .cyc-hint:hover, .doc .cyc-hint:focus-visible { background: var(--w-tab, #3f5a66); color: #fff; }
.doc .cyc-hint:focus-visible { outline: 2px solid var(--w-tab, #3f5a66); outline-offset: 2px; }
.doc .cyc-hint[hidden] { display: none; }
.cyc-tabs.is-pinned .cyc-hint { opacity: 0; pointer-events: none; }
.cyc-tabs.is-pinned .cyc-prog { top: calc(100% + 4px); }
/* the hint needs room under the bar while it shows */
.cyc-tabs:has(.cyc-hint:not([hidden])) { margin-bottom: calc(var(--cyc-gap) + 1.9rem); }
/* "From the start", at the foot of the final prototype: the Next pill, leading left */
.doc .cyc-next--back { justify-content: flex-start; }
@media (prefers-reduced-motion: reduce) { .cyc-prog i, .doc .cyc-hint { transition: none; } }
@media print { .cyc-prog, .cyc-hint { display: none !important; } }