/* ===========================================================================
   Part 4's cycle map (15 Oct 2026): the team's cycle diagram, its right half, as links
   ---------------------------------------------------------------------------
   nav#cyc-map, an .xp card from the shared kit (../css/explore.css), with no
   honesty tag since 15 Oct (it is navigation): every node is a prototype on
   record (or outlined, in orange). It is
   the right half of Timmy's "Bioreactor Engineering" diagram: two tracks,
   Hollow fiber membrane (4.1) and Pumps & valve control (4.2), that merge, with
   the Long-term run arriving from the photometer page (its 5.3), into the
   Integrative bioreactor (4.3). Each node links to its prototype and carries
   the record's D/B/T/L ring in small: the four greens where a stage is written,
   the record's orange where it is not (.gap-t .gap-l: prototype 3's test and
   learn), and all orange for a prototype only outlined (.is-todo). No script:
   it is the same with JavaScript off. Orange means missing and nothing else.

   The card, the tracks, the nodes and the rings are the photometer page's map
   (../photometer/css/xp-cyclemap.css), restated here because each page loads
   its own pieces; keep the two in step. Only this half's own parts are new:
   the join (.cm-join, the long run coming in from the other page, on the stem)
   and the gaps a ring can have (.gap-d/-b/-t/-l).
   =========================================================================== */

.xp-cm {
  --cm-d: var(--w-leaf-900, #14402b); --cm-b: var(--w-leaf-700, #23684a); --cm-t: #2e7d5b; --cm-l: #1d6a62;
  --cm-miss: #fdba8c; --cm-miss-bg: #fff7f2; --cm-miss-ink: #9a3412;
  --cm-line: #a7c6b4;
  --cm-gap: 28px;
}
/* the card's sub-line and note run its whole width (the kit caps the sub-line at 64ch) */
#cyc-map.xp-cm > p.xp-sub, #cyc-map.xp-cm > p.xp-note { max-width: none; }

.xp-cm .cm-stage { padding: 18px 20px 20px; }
.xp-cm .cm-tracks {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 var(--cm-gap);
}
.xp-cm .cm-track { display: flex; flex-direction: column; min-width: 0; }
/* each track runs on down to the merge from under its last prototype, as the diagram's lines do */
.xp-cm .cm-track::after {
  content: ""; flex: 1 0 14px; align-self: center; width: 2px; margin-top: 8px; background: var(--cm-line);
}
/* the bracket that joins the two tracks, and the stem down from it */
.xp-cm .cm-merge { position: relative; height: 30px; }
.xp-cm .cm-merge::before {
  content: ""; position: absolute; top: 0; height: 16px;
  left: calc((100% - var(--cm-gap)) / 4 - 1px); right: calc((100% - var(--cm-gap)) / 4 - 1px);
  border: 2px solid var(--cm-line); border-top: 0; border-radius: 0 0 12px 12px;
}
.xp-cm .cm-merge::after {
  content: ""; position: absolute; left: calc(50% - 1px); top: 16px; bottom: 0; width: 2px; background: var(--cm-line);
}

/* ---- the join: the long-term run comes in from the photometer page, on the stem ----
   The left half of the stage, its link set against the stem with a short line into it; the stem runs on
   through it and down to the integrative bioreactor, as the diagram's line from the long run does. */
.xp-cm .cm-join {
  position: relative; display: flex; justify-content: flex-end; width: 50%; box-sizing: border-box;
  padding: 4px 26px 4px 0;
}
.xp-cm .cm-join::before {
  content: ""; position: absolute; right: -1px; top: 0; bottom: 0; width: 2px; background: var(--cm-line);
}
.xp-cm .cm-join::after {
  content: ""; position: absolute; right: 0; top: 50%; width: 26px; height: 2px; margin-top: -1px; background: var(--cm-line);
}
.xp-cm .cm-run { position: relative; display: flex; flex-direction: column; align-items: center; padding-top: 12px; }
.xp-cm .cm-run::before {
  content: ""; position: absolute; left: calc(50% - 1px); top: 0; height: 6px; width: 2px; background: var(--cm-line);
}
.xp-cm .cm-run .cm-list { width: max(calc((100% - var(--cm-gap)) / 2), min(100%, 17rem)); }

/* ---- a track's name: a link to its part ---- */
#cyc-map.xp-cm a.cm-th {
  display: inline-flex; align-items: baseline; gap: .45rem; align-self: flex-start;
  margin: 0 0 10px; padding: 0; border: 0; background: none;
  font: 700 12px/1.25 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  color: #1f2933; text-decoration: none;
}
#cyc-map.xp-cm .cm-run a.cm-th { align-self: center; }
#cyc-map.xp-cm a.cm-th i { font: 600 11px/1 var(--mono); font-style: normal; letter-spacing: 0; color: var(--cm-b); }
#cyc-map.xp-cm a.cm-th:hover { color: var(--cm-b); }
#cyc-map.xp-cm a.cm-th:focus-visible { outline: 2px solid var(--cm-b); outline-offset: 3px; border-radius: 4px; }

/* ---- the prototypes ---- */
#cyc-map.xp-cm ol.cm-list { display: grid; gap: 8px; width: auto; max-width: none; margin: 0; padding: 0; list-style: none; }
#cyc-map.xp-cm ol.cm-list > li { margin: 0; padding: 0; max-width: none; list-style: none; border: 0; background: none; }
#cyc-map.xp-cm ol.cm-list > li::before { content: none; display: none; }
#cyc-map.xp-cm ol.cm-list > li::marker { content: ""; }
#cyc-map.xp-cm .cm-n > a, #cyc-map.xp-cm a.cm-in {
  display: flex; align-items: center; gap: 10px; min-height: 44px; box-sizing: border-box;
  padding: 6px 12px 6px 7px; border: 1px solid #d7e3dc; border-radius: 12px;
  background: #fff; box-shadow: 0 1px 0 rgba(20, 64, 43, .05);
  font: 600 14px/1.3 var(--sans); letter-spacing: -.005em; color: #1f2933;
  text-decoration: none; background-image: none;
  transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}
#cyc-map.xp-cm :is(.cm-n > a, a.cm-in):hover { border-color: var(--w-leaf-500, #4f9c6f); background-color: var(--w-leaf-50, #f4f9f6); transform: translateY(-1px); }
#cyc-map.xp-cm :is(.cm-n > a, a.cm-in):focus-visible { outline: 2px solid var(--cm-b); outline-offset: 2px; }
/* the run from the other page: a dashed edge, and an arrow where a prototype's number would be */
#cyc-map.xp-cm a.cm-in { min-width: 0; max-width: 17rem; border-style: dashed; border-color: #b9cfc2; }
.xp-cm .cm-l { min-width: 0; }
.xp-cm .cm-l i { font-style: italic; color: inherit; }
.xp-cm .cm-l small { display: block; margin-top: 1px; font: 500 12px/1.3 var(--sans); letter-spacing: 0; color: #556070; }

/* the record's D/B/T/L ring, in small (wiki-align.css draws the big one the same way) */
.xp-cm .cm-ring {
  --qd: var(--cm-d); --qb: var(--cm-b); --qt: var(--cm-t); --ql: var(--cm-l);
  position: relative; flex: none; display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: conic-gradient(from -45deg, var(--qd) 0 25%, var(--qb) 0 50%, var(--qt) 0 75%, var(--ql) 0 100%);
}
.xp-cm .cm-ring::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: #fff; }
.xp-cm .cm-ring b { position: relative; font: 750 12px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--cm-d); }
.xp-cm .cm-in .cm-ring b { font-size: 13px; }
/* a stage not written yet, and a prototype only outlined: the record's orange */
.xp-cm .gap-d .cm-ring { --qd: var(--cm-miss); }
.xp-cm .gap-b .cm-ring { --qb: var(--cm-miss); }
.xp-cm .gap-t .cm-ring { --qt: var(--cm-miss); }
.xp-cm .gap-l .cm-ring { --ql: var(--cm-miss); }
.xp-cm .is-todo .cm-ring { --qd: var(--cm-miss); --qb: var(--cm-miss); --qt: var(--cm-miss); --ql: var(--cm-miss); }
.xp-cm .is-todo .cm-ring::before { background: var(--cm-miss-bg); }
.xp-cm .is-todo .cm-ring b { color: var(--cm-miss-ink); }
#cyc-map.xp-cm .cm-n.is-todo > a { border-color: var(--cm-miss); background-color: var(--cm-miss-bg); color: var(--cm-miss-ink); }
#cyc-map.xp-cm .cm-n.is-todo > a:hover { border-color: #c2410c; background-color: #fff1e8; }
.xp-cm .is-todo .cm-l small { color: var(--cm-miss-ink); }

/* words for a screen reader only: "Prototype 2:", and what is not written */
.xp-cm .cm-sr {
  position: absolute !important; 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;
}

/* ---- phones: the two tracks stay side by side, as in the diagram, a little tighter ---- */
@media (max-width: 560px) {
  .xp-cm { --cm-gap: 12px; }
  .xp-cm .cm-stage { padding: 14px 12px 16px; }
  #cyc-map.xp-cm a.cm-th { font-size: 11px; letter-spacing: .06em; }
  #cyc-map.xp-cm :is(.cm-n > a, a.cm-in) { gap: 8px; min-height: 40px; padding: 6px 8px 6px 6px; font-size: 13px; }
  .xp-cm .cm-ring { width: 26px; height: 26px; }
  .xp-cm .cm-ring::before { inset: 4px; }
  .xp-cm .cm-ring b { font-size: 11px; }
  .xp-cm .cm-l small { font-size: 11px; }
  .xp-cm .cm-lo { display: none; }
  /* a shorter line from the join into the stem, so the link keeps its room in half the stage */
  .xp-cm .cm-join { padding-right: 10px; }
  .xp-cm .cm-join::after { width: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  #cyc-map.xp-cm :is(.cm-n > a, a.cm-in) { transition: none; }
  #cyc-map.xp-cm :is(.cm-n > a, a.cm-in):hover { transform: none; }
}