/* ============================================================
   w-journey.css — the "journey" widget (js/w-journey.js): travel with the blood from an artery
   to a vein. Every class is .jn or .jn__*, so nothing here touches the rest of the lab.

   The controls, the stage strip and the words sit on the paper of the card; the two drawings sit
   on the lab's dark specimen plate, the same ink as the body in the left column. The accent is
   the lab's vessel ink (amber), the colour every blood-vessel word already has in the text.
   Red and blue appear only for the blood itself, as on the plate.
   ============================================================ */
.jn{--jn-acc:var(--k-vessel,#8A5A0E);--jn-acc-t:#FBF3E3;max-width:980px;margin:0 auto}

/* ---------- the controls ---------- */
.jn__bar{display:flex;align-items:center;gap:10px;margin:8px 0 6px;flex-wrap:wrap}
.jn__play{font:inherit;font-size:13.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:122px;padding:7px 16px 7px 13px;cursor:pointer;
  border:1.5px solid var(--jn-acc);border-radius:var(--r-pill,999px);background:var(--jn-acc);color:#fff}
.jn__play:hover{filter:brightness(1.1)}
.jn__play.is-playing{background:#fff;color:var(--jn-acc)}
/* a stage has finished and is waiting: the button says so, twice, and then stays still */
.jn__play.is-next{animation:jn-next 1.5s ease-out 2}
@keyframes jn-next{0%{box-shadow:0 0 0 0 rgba(138,90,14,.5)}100%{box-shadow:0 0 0 11px rgba(138,90,14,0)}}
@media (prefers-reduced-motion:reduce){.jn__play.is-next{animation:none}}
.jn__all{font:inherit;font-size:12.5px;font-weight:600;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;cursor:pointer;
  border:1.5px solid var(--edge,#E7DFD1);border-radius:var(--r-pill,999px);background:#fff;color:#5A5A5A}
.jn__all:hover{border-color:var(--jn-acc);color:var(--jn-acc)}
.jn__all[hidden]{display:none}
.jn__all .jn__ico{font-size:9px;letter-spacing:-1px}
.jn__ico{font-size:11px;line-height:1}
.jn__count{margin-left:auto;font-size:12.5px;font-weight:600;color:var(--grey,#6B6B6B);font-variant-numeric:tabular-nums}
.jn__play:focus-visible,.jn__all:focus-visible,.jn__realb:focus-visible{outline:2px solid var(--jn-acc);outline-offset:2px}

/* ---------- the stage strip: progress, and the blood pressure along the way ---------- */
.jn__route{margin:0 0 8px}
.jn__routesvg{display:block;width:100%;height:auto;overflow:visible}
.jn__stop{cursor:pointer;outline:none}
.jn__stop:focus-visible .jn__track{stroke:var(--jn-acc);stroke-width:3}
.jn__track{stroke-width:3;stroke-linecap:round;opacity:.35}
.jn__stop.is-done .jn__track{opacity:.6}
.jn__stop.is-on .jn__track{opacity:1;stroke-width:4}
.jn__stopn{font-family:var(--font);font-size:12.5px;font-weight:700}
.jn__stop.is-on .jn__stopn{font-weight:800;text-decoration:underline}
.jn__stop--ext .jn__stopn{font-style:italic}
.jn__stopx{stroke:#A09A8C;stroke-width:1;stroke-dasharray:2.5 2}
.jn__rline{fill:none;stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.jn__rgrid{stroke:#E9E2D3;stroke-width:1}
.jn__rtick{font-family:var(--mono,ui-monospace,monospace);font-size:10.5px;fill:#8A8A8A}
.jn__raxis{font-family:var(--font);font-size:11.5px;font-weight:700;fill:#5A5A5A}
.jn__raxl{stroke:#B9AF9C;stroke-width:1.2}
.jn__rband{fill:transparent}
.jn__stop.is-on .jn__rband{fill:#F6F1E6}
.jn__stop:hover .jn__rband{fill:#FAF6EE}
.jn__rdot{stroke:#fff;stroke-width:2.2;filter:drop-shadow(0 1px 2px rgba(0,0,0,.25))}

/* ---------- the plate ---------- */
.jn__plate{border-radius:var(--r-lg,16px);padding:10px 12px 8px;color:#DCE7ED;
  background:#060D12;background-image:radial-gradient(95% 80% at 45% 40%,#10222C 0%,#0A161D 62%,#060D12 100%);
  box-shadow:inset 0 0 0 1px rgba(220,231,237,.06)}
.jn__views{display:flex;gap:10px;align-items:flex-start}
.jn--narrow .jn__views{flex-direction:column;gap:6px}
.jn--narrow .jn__plate{padding:8px 8px 6px}
.jn__svg{display:block;flex:none;overflow:visible}
.jn__view{fill:#0B171E}
.jn__viewline{fill:none;stroke:rgba(220,231,237,.14);stroke-width:1}
.jn__head{font-family:var(--mono,ui-monospace,monospace);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;fill:#9CB4C0}
.jn__dir{font-family:var(--mono,ui-monospace,monospace);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;fill:#E8B04A}
.jn--narrow .jn__head,.jn--narrow .jn__dir{font-size:9.5px;letter-spacing:.06em}
.jn__sbar{fill:none;stroke:#DCE7ED;stroke-width:1.6}
.jn__sbarl{font-family:var(--mono,ui-monospace,monospace);font-size:10.5px;fill:#DCE7ED}
.jn__cut{stroke:#F4F7F9;stroke-width:1.4;stroke-dasharray:4 3;fill:none}
.jn__cutm{fill:#F4F7F9}
.jn__zoom{fill:rgba(6,13,18,.84);stroke:#E8B04A;stroke-width:1}
.jn__zoomt{font-family:var(--mono,ui-monospace,monospace);font-size:11px;letter-spacing:.06em;fill:#F6D58C}

/* the labels: light on the dark plate, each on a ruled leader with a dark halo, so it reads
   over the pale wall and the dark lumen alike */
.jn__labs{pointer-events:none}
.jn__lab{fill:#EEF3F6;font-family:var(--font);font-weight:600;text-rendering:geometricPrecision}
.jn__lead{fill:none;stroke:#C7D6DE;stroke-width:1;stroke-linejoin:round}
.jn__leadh{fill:none;stroke:#040A0E;stroke-opacity:.85;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.jn__pin{fill:#F6F9FB;stroke:#040A0E;stroke-width:1.2}
.jn__br{fill:none;stroke:#F6F9FB;stroke-width:1.3}
.jn__brh{fill:none;stroke:#040A0E;stroke-opacity:.85;stroke-width:3.6;stroke-linecap:round}

/* the key: the colours said once, and what is simplified at this stage */
.jn__key{margin:6px 2px 0;font-size:12px;line-height:1.45;color:#A9BDC7}
.jn__sw{display:inline-block;width:9px;height:9px;border-radius:50%;margin:0 4px 0 2px;vertical-align:0}
.jn__sw--o{background:#E8453F}
.jn__sw--d{background:#3F72D6;margin-left:8px}
.jn__simp{display:block;color:#8EA8B5;font-style:italic;margin-top:1px}

/* ---------- the words, and the real picture ---------- */
.jn__below{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:16px;align-items:start;margin-top:12px}
.jn__below--nopic{grid-template-columns:minmax(0,1fr)}
.jn--narrow .jn__below{grid-template-columns:minmax(0,1fr);gap:12px}
.jn__cap p{margin:0}
.jn__caph{display:flex;align-items:center;flex-wrap:wrap;gap:7px;font-size:15px;color:var(--ink,#1A1A1A);margin-bottom:5px!important}
.jn__caph b{font-weight:800;color:var(--jn-acc)}
.jn__num{flex:none;width:22px;height:22px;border-radius:50%;background:var(--jn-acc);color:#fff;font-size:12px;font-weight:700;display:grid;place-items:center}
.jn__tag{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;
  color:#7A6B52;background:#F1EDE3;border:1px dashed #C3B69C;border-radius:var(--r-pill,999px);padding:1px 8px}
.jn__capp{font-size:15px;line-height:1.55;color:#2E2E2E}
.jn__s{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.04em;color:var(--grey,#6B6B6B);border:1px solid var(--line,#C4C4C4);
  border-radius:4px;padding:0 4px;margin:0 5px 0 2px;vertical-align:1px;line-height:1.5;background:var(--card-2,#FDFBF6)}
.jn__tagnote{margin-top:6px!important;font-size:12.5px;line-height:1.45;color:#7A6B52}
.jn__beyond{margin-top:9px!important;padding:7px 10px;font-size:13px;line-height:1.5;color:#4A4A4A;
  background:#F7F4EC;border:1px dashed #CFC3A8;border-radius:var(--r-sm,6px)}
.jn__beyondt{display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#7A6B52;
  background:#fff;border:1px dashed #C3B69C;border-radius:var(--r-pill,999px);padding:0 7px;margin-right:4px;vertical-align:1px}
.jn__real{margin:0}
.jn__real[hidden]{display:none}
.jn__realb{display:block;width:100%;padding:0;border:0;border-radius:var(--r,10px);overflow:hidden;background:#0B141A;cursor:zoom-in}
.jn__realb picture,.jn__realb img{display:block;width:100%;height:auto;max-height:380px;object-fit:contain}
.jn__real figcaption{margin-top:6px;font-size:12.5px;line-height:1.45;color:#4A4A4A}
.jn__realk{display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:#3C3C3C;border-radius:var(--r-pill,999px);padding:1px 7px;margin-right:3px;vertical-align:1px}
.jn__credit{display:block;margin-top:2px;font-size:11.5px;color:var(--grey,#6B6B6B)}
.jn__credit a{color:inherit}

/* ---------- the three vessels the syllabus names ---------- */
.jn__sum{width:100%;margin-top:14px;border-collapse:collapse;font-size:13.5px;line-height:1.4;table-layout:fixed}
.jn__sum caption{caption-side:top;text-align:left;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--green,#14572B);padding:0 0 6px}
.jn__sum th,.jn__sum td{border:1px solid var(--edge,#E7DFD1);padding:6px 9px;text-align:left;vertical-align:top}
.jn__sum thead th{background:var(--card-2,#FDFBF6);font-weight:800;color:var(--jn-acc)}
.jn__sum thead th:first-child{background:transparent;border-top-color:transparent;border-left-color:transparent}
.jn__sum tbody th{font-weight:700;color:#3A3A3A;background:#fff;width:24%}
.jn__sum td{background:#fff;color:#333}
.jn__sum .is-on{background:var(--jn-acc-t);box-shadow:inset 0 0 0 1.5px var(--jn-acc)}
.jn--narrow .jn__sum{font-size:12.5px}
.jn--narrow .jn__sum th,.jn--narrow .jn__sum td{padding:5px 6px}
.jn--narrow .jn__sum tbody th{width:22%}

/* in the simulation column beside the questions there is no card round the widget */
.sim .jn__plate{border-radius:12px}

/* standing in the plate's column (CircLearn.stage): the two drawings, below the title, in the middle of the
   column; the buttons, the route, the words and the real picture stay on the right */
.sim > .jn__pack{flex:1;min-height:0;display:flex;flex-direction:column;gap:6px;overflow:auto}
.sim > .jn__pack .jn__plate{margin:auto 0}
/* the leg muscle pressing on the vein from outside, while it contracts */
.jn__sq path{fill:none;stroke:#FFE3A0;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}