/* ---- Adjusting to Feedback (18 Oct 2026) ------------------------------------
   1. The timeline: the engineering cycles and the reviews, in order, not to
   scale. One thin line; reviews are leaf-green dots with their label ABOVE
   it, cycles are short ticks with their label BELOW it. Where two labels on
   the same side would sit close, the second steps out to a far row and a
   hairline leader joins it to its mark (.far). Short labels ("HF 1",
   "Integrated 1"); the full name is each link's title and aria-label. No
   cards, no script: hwdoc.js opens a prototype's tab, or a closed fold, for
   any link into it. It fits the 760 px column; narrower, it scrolls
   sideways inside its own box, with a fade at the edge and a hint.
   2. The notes under it: the page's .fold, one per review, with a wrapping
   two-line summary (who and when; a one-line hook). */

.doc .sec nav.fb-tl { margin: .2rem 0 1.8rem; padding: 0; max-width: none; }
.doc .sec .fb-tl p.fb-tl__t {
  margin: 0 0 .6rem; max-width: none;
  font: 700 .75rem/1.3 var(--sans, system-ui, sans-serif); letter-spacing: .08em;
  text-transform: uppercase; color: #4a4a4a;
}
.doc .sec .fb-tl__scroll {
  position: relative;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch; scrollbar-width: thin;
  border-top: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6;
}
.doc .sec .fb-tl__scroll:focus-visible { outline: 2px solid var(--w-leaf-700, #23684a); outline-offset: 2px; }

/* the strip: 14 slots, line at 116px */
.doc .sec .fb-tl ol.fb-tl__list {
  list-style: none; display: flex; margin: 0; padding: 0 1.5rem; min-width: 43rem;
  counter-reset: none;
}
.doc .sec .fb-tl ol.fb-tl__list > li.fb-tl__i {
  position: relative; flex: 1 1 0; min-width: 0; height: 232px; margin: 0; padding: 0;
  font-size: inherit; line-height: inherit;
}
.doc .sec .fb-tl ol.fb-tl__list > li.fb-tl__i::after { content: none; display: none; }
.doc .sec .fb-tl ol.fb-tl__list > li.fb-tl__i::before {   /* the line, drawn edge to edge by every slot */
  content: ""; display: block; position: absolute; left: 0; right: 0; top: 116px;
  width: auto; height: 1px; margin: 0; border: 0; border-radius: 0; background: #c9c9c9;
  transform: none; counter-increment: none;
}
.doc .sec .fb-tl ol.fb-tl__list > li.fb-tl__i:first-child::before { left: 50%; }
.doc .sec .fb-tl ol.fb-tl__list > li.fb-tl__i:last-child::before { right: 50%; }

.fb-tl__mk { position: absolute; left: 50%; top: 116px; z-index: 1; display: block; transform: translate(-50%, -50%); }
.fb-tl__i.cy .fb-tl__mk { width: 2px; height: 14px; background: #3a3a3c; }
.fb-tl__i.rv .fb-tl__mk {
  width: 9px; height: 9px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 1.5px var(--w-leaf-700, #23684a);
}
.fb-tl__i.rv.key .fb-tl__mk { width: 11px; height: 11px; background: var(--w-leaf-700, #23684a); box-shadow: none; }
/* the leader from a far label to its mark */
.fb-tl__i.far .fb-tl__mk::after {
  content: ""; position: absolute; left: 50%; width: 1px; height: 60px; background: #d4d4d4; transform: translateX(-50%);
}
.fb-tl__i.rv.far .fb-tl__mk::after { bottom: 100%; }
.fb-tl__i.cy.far .fb-tl__mk::after { top: 100%; }

/* the labels. (0,5,4) wins over wiki-align.css's underlined body-link rule at (0,5,3) */
body.doc-light .doc-wrap .sec nav.fb-tl li.fb-tl__i > a, .doc .sec .fb-tl__i > a {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  width: max-content; max-width: 6rem; padding: 3px 5px; border-radius: 6px;
  color: #262626; text-decoration: none; border: 0; background: none; text-align: center;
  font: 400 12px/1.3 var(--sans, system-ui, sans-serif);
  overflow-wrap: normal; word-break: normal; hyphens: manual;
}
.doc .sec .fb-tl__i.rv.near > a { bottom: calc(232px - 116px + 12px); }
.doc .sec .fb-tl__i.rv.far > a  { bottom: calc(232px - 116px + 74px); }
.doc .sec .fb-tl__i.cy.near > a { top: calc(116px + 12px); }
.doc .sec .fb-tl__i.cy.far > a  { top: calc(116px + 74px); }
.doc .sec .fb-tl__i > a b { font-weight: 650; color: #1d1d1f; font-size: 12.5px; line-height: 1.3; }
.doc .sec .fb-tl__i.cy > a b { white-space: nowrap; }
.doc .sec .fb-tl__i > a time {
  font-weight: 650; font-size: 12px; letter-spacing: .02em; white-space: nowrap;
  color: var(--w-leaf-700, #23684a);
}
.doc .sec .fb-tl__i.cy > a time { color: #6a6a6a; font-weight: 500; }
body.doc-light .doc-wrap .sec nav.fb-tl li.fb-tl__i > a:hover,
body.doc-light .doc-wrap .sec nav.fb-tl li.fb-tl__i > a:focus-visible { background: #f1f6f2; color: #262626; text-decoration: none; }
body.doc-light .doc-wrap .sec nav.fb-tl li.fb-tl__i > a:hover b,
body.doc-light .doc-wrap .sec nav.fb-tl li.fb-tl__i > a:focus-visible b { color: var(--w-leaf-700, #23684a); }
body.doc-light .doc-wrap .sec nav.fb-tl li.fb-tl__i > a:focus-visible { outline: 2px solid var(--w-leaf-700, #23684a); outline-offset: 1px; }

.doc .sec .fb-tl p.fb-tl__key {
  display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin: .6rem 0 0; max-width: none;
  font: 400 12px/1.4 var(--sans, system-ui, sans-serif); color: #4a4a4a;
}
.fb-tl__key > span { display: inline-flex; align-items: center; gap: .45rem; }
.fb-tl__key > .cy::before { content: ""; flex: none; width: 2px; height: 12px; background: #3a3a3c; }
.fb-tl__key > .rv::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--w-leaf-700, #23684a); }
.fb-tl__key > .fb-tl__hint { display: none; }
.fb-tl__key > .fb-tl__hint::after { content: " \2192"; }
@media (max-width: 820px) {
  .doc .sec .fb-tl__scroll {
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 36px), transparent);
            mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 36px), transparent);
  }
  .fb-tl__key > .fb-tl__hint { display: inline-flex; font-weight: 600; color: var(--w-leaf-700, #23684a); }
}

/* 2. the notes */
.doc .sec .fb-folds { margin-top: 1rem; }
.doc .sec .fb-folds .fold > summary { flex-wrap: wrap; row-gap: .2rem; }
.doc .sec .fb-folds .fold__t { flex: 1 1 100%; font-weight: 650; }
.doc .sec .fb-folds .fold__t .fb-when {
  margin-left: .45rem; font-size: .8125rem; font-weight: 700; letter-spacing: .02em; color: var(--w-leaf-700, #23684a);
}
.doc .sec .fb-folds .fold__t .fb-what { font-size: .875rem; font-weight: 500; color: #4a4a4a; }
.doc .sec .fb-folds .fold__t .fb-what::before { content: "\00b7\00a0"; }
.doc .sec .fb-folds .fold__sub {
  flex: 1 1 100%; margin-left: 0; white-space: normal;
  font-size: .875rem; font-weight: 400; line-height: 1.45; color: #4a4a4a;
}
.doc .sec .fb-folds .fold__body { padding-top: .1rem; }
.doc .sec .fb-folds .fold__body p.fb-meta { font-size: .8125rem; line-height: 1.5; color: #5a5a5a; margin-bottom: .7rem; }