/* ===========================================================================
   Part 5's cycle map (15 Oct 2026): the team's cycle diagram, 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 left half of Timmy's "Bioreactor Engineering" diagram: two tracks,
   Bacteria growth (5.1) and Inline photometer (5.2), that merge into the
   Long-term run (5.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-b: growth prototype 3's build), 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.
   =========================================================================== */

.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 to the run */
.xp-cm .cm-merge { position: relative; height: 34px; }
.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: 6px; width: 2px; background: var(--cm-line);
}
.xp-cm .cm-run { display: flex; flex-direction: column; align-items: center; }
.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 {
  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 .cm-n > a:hover { border-color: var(--w-leaf-500, #4f9c6f); background-color: var(--w-leaf-50, #f4f9f6); transform: translateY(-1px); }
#cyc-map.xp-cm .cm-n > a:focus-visible { outline: 2px solid var(--cm-b); outline-offset: 2px; }
.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); }
/* a stage not written yet, and a prototype only outlined: the record's orange */
.xp-cm .gap-b .cm-ring { --qb: 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 .cm-n > a { 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; }
}
@media (prefers-reduced-motion: reduce) {
  #cyc-map.xp-cm .cm-n > a { transition: none; }
  #cyc-map.xp-cm .cm-n > a:hover { transform: none; }
}

/* W6 R2 (17 Oct 2026), V23: on a phone the track number "3.1-3.4" does not break at its dash */
#cyc-map.xp-cm a.cm-th i { white-space: nowrap; }

/* 17 Oct 2026 sim pass (the owner: the interactive pieces must be obvious to anyone): the sub-line is a "Try this:"
   line, set apart like the bioreactor models' ones, and every prototype ends on an arrow, so each reads as a link. */
#cyc-map.xp-cm > p.xp-sub.xp-try {
  margin: .15rem 1.15rem .8rem; padding: .55rem .8rem;
  border-radius: 10px; background: #f4f9f6; border: 1px solid #dcebe2;
  font-size: .92rem; line-height: 1.5; color: var(--xp-ink);
}
#cyc-map.xp-cm .xp-try b { color: var(--xp-leaf-d); font-weight: 700; }
#cyc-map.xp-cm .cm-n > a::after {
  content: ""; flex: none; width: 7px; height: 7px; margin: 0 2px 0 auto;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg);
  opacity: .35; transition: opacity .18s ease, transform .18s ease;
}
#cyc-map.xp-cm .cm-n > a:hover::after, #cyc-map.xp-cm .cm-n > a:focus-visible::after { opacity: .9; transform: translateX(2px) rotate(-45deg); }
@media (max-width: 560px) {
  #cyc-map.xp-cm > p.xp-sub.xp-try { margin-left: .85rem; margin-right: .85rem; }
}
@media (prefers-reduced-motion: reduce) {
  #cyc-map.xp-cm .cm-n > a::after { transition: none; }
  #cyc-map.xp-cm .cm-n > a:hover::after { transform: rotate(-45deg); }
}