/* Station 03 lesson: two lanes off one platform spine, a stage readout, and a sample reading. */
.xr-mapping { --map-a: #72e5ef; --map-b: #b7a0ff; --lane: var(--map-a); --good: #87e8a0; --fair: #f2c66d; --poor: #ff8f7b; }
.xr-mapping[data-lane=branch] { --lane: var(--map-b); }
.xr-map-lane[data-lane=main] { --lane: var(--map-a); }
.xr-map-lane[data-lane=branch] { --lane: var(--map-b); }

/* The spine: both lanes branch off one platform, so they read as connected but separate.
   It hangs off lane A and stops at lane B's tick, so it fits however tall lane B grows. */
.xr-map-diagram { position: relative; display: grid; gap: 22px; margin-top: 8px; padding-left: 30px; }
.xr-map-lane[data-lane=main]::after {
  content: ''; position: absolute; left: -23px; top: -4px; bottom: -31px; width: 1px;
  background: linear-gradient(var(--map-a), var(--map-a) 70%, var(--map-b));
  opacity: .6;
}
.xr-lesson .xr-map-root { position: relative; margin: 0 0 -10px -30px; color: #87ced8; font: 500 10px/1.4 var(--mono); letter-spacing: .14em; }
.xr-lesson .xr-map-root::before {
  content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 10px; vertical-align: -1px;
  border: 1px solid var(--map-a); border-radius: 50%; background: #07151d; box-shadow: 0 0 10px #72e5ef55;
}
.xr-map-lane { position: relative; }
.xr-map-lane::before {
  content: ''; position: absolute; left: -23px; top: 9px; width: 16px; height: 1px;
  background: var(--lane); opacity: .6;
}
.xr-lesson .xr-map-lane-label { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; color: #b3cdd7; font: 500 11px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.xr-map-lane-label span {
  display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 4px;
  background: color-mix(in srgb, var(--lane) 18%, transparent); color: var(--lane); font-weight: 600; letter-spacing: 0;
}

/* Stages and the wires between them. The phones sit under the equipment: both live in the field. */
.xr-map-row { display: grid; grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr) 34px minmax(0, 1fr) 34px minmax(0, 1fr); align-items: stretch; }
.xr-map-lane[data-lane=branch] .xr-map-stage { border-color: color-mix(in srgb, var(--map-b) 38%, #35505d); background: color-mix(in srgb, var(--map-b) 5%, #0a1d27); }
.xr-map-lane[data-lane=branch] .xr-map-stage[aria-pressed=true] { border-color: var(--lane); background: color-mix(in srgb, var(--lane) 12%, #0a1d27); }
.xr-map-stage {
  display: grid; align-content: start; gap: 3px; min-height: 132px; padding: 12px 14px 12px;
  border: 1px solid #35505d; border-radius: 10px; background: #0a1d27;
  color: #d2e7ef; font: inherit; text-align: left; cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.xr-map-stage:hover { border-color: color-mix(in srgb, var(--lane) 70%, #35505d); }
.xr-map-stage:focus-visible { outline: 2px solid var(--lane); outline-offset: 3px; }
.xr-map-stage[aria-pressed=true] {
  border-color: var(--lane); background: color-mix(in srgb, var(--lane) 10%, #0a1d27);
  box-shadow: 0 0 0 1px var(--lane), 0 0 28px color-mix(in srgb, var(--lane) 22%, transparent);
}
.xr-map-stage-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.xr-map-step {
  display: inline-grid; place-items: center; width: 24px; height: 24px; flex: none;
  border: 1px solid var(--lane); border-radius: 50%; color: var(--lane); font: 600 11px/1 var(--mono);
  transition: background-color .2s ease, color .2s ease;
}
.xr-map-stage[aria-pressed=true] .xr-map-step { background: var(--lane); color: #07151d; }
.xr-map-zone { color: #7f9aa7; font: 500 9.5px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; text-align: right; }
.xr-map-verb { color: #e6f7fb; font: 500 18px/1.2 var(--display); letter-spacing: -.01em; }
.xr-map-tool { color: var(--lane); font: 500 12px/1.4 var(--mono); }
.xr-map-out {
  margin-top: auto; padding-top: 9px; border-top: 1px dashed #2a4552;
  color: #9bb5c3; font: 400 11px/1.4 var(--mono);
}
.xr-map-out::before { content: '→ '; color: var(--lane); }
.xr-map-stage { grid-template-rows: auto auto auto 1fr; }
.xr-map-stage .xr-map-out { align-self: end; }

.xr-map-wire { position: relative; align-self: center; height: 2px; margin-inline: 4px; background: #2a4552; transition: background-color .3s ease; }
.xr-map-wire::after {
  content: ''; position: absolute; right: -2px; top: -4px;
  border-left: 6px solid #2a4552; border-block: 5px solid transparent; transition: border-color .3s ease;
}
.xr-map-wire.xr-map-lit { background: var(--lane); box-shadow: 0 0 8px color-mix(in srgb, var(--lane) 55%, transparent); }
.xr-map-wire.xr-map-lit::after { border-left-color: var(--lane); }
.xr-map-wire i { position: absolute; top: -2px; left: 0; width: 6px; height: 6px; border-radius: 50%; background: #e6f7fb; box-shadow: 0 0 6px var(--lane); opacity: 0; }

/* Path B's join: out of the server, past the API and Rust, and up into the Draw card above.
   --climb is lane B's label plus the gap between lanes; --mid is the centre of the last column. */
.xr-map-join {
  --join: color-mix(in srgb, var(--map-b) 45%, #2a4552); --climb: 49px; --mid: calc(50% + 17px);
  position: relative; grid-column: 6 / -1; align-self: stretch;
}
.xr-map-join i { position: absolute; background: var(--join); transition: background-color .3s ease, box-shadow .3s ease; }
.xr-map-join i:first-child { left: 4px; top: calc(50% - 1px); width: calc(var(--mid) - 3px); height: 2px; }
.xr-map-join i + i { left: calc(var(--mid) - 1px); top: calc(-1 * var(--climb) + 6px); bottom: calc(50% - 1px); width: 2px; }
.xr-map-join i + i::after {
  content: ''; position: absolute; top: -6px; left: -4px;
  border-bottom: 6px solid var(--join); border-inline: 5px solid transparent; transition: border-color .3s ease;
}
.xr-map-join em {
  position: absolute; left: calc(var(--mid) + 10px); right: 0; top: calc(-1 * var(--climb) / 2 + 2px);
  color: #b9aaf0; font: 500 10px/1.4 var(--mono); font-style: normal; letter-spacing: .08em; text-transform: uppercase;
}
.xr-map-join.xr-map-lit { --join: var(--map-b); }
.xr-map-join.xr-map-lit i { box-shadow: 0 0 8px color-mix(in srgb, var(--map-b) 55%, transparent); }

/* Trace control. */
.xr-map-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 22px 0 14px; }
.xr-map-trace-icon { width: 0; height: 0; border-left: 9px solid currentColor; border-block: 6px solid transparent; }
[data-xr-map-trace][aria-pressed=true] .xr-map-trace-icon { width: 10px; height: 10px; border: 0; border-radius: 2px; background: currentColor; }
.xr-map-trace-hint { color: #8fa9b6; font: 400 12px/1.5 var(--sans); }

/* Readout: what the selected stage does, and one reading as it leaves that stage. */
.xr-map-detail {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px 28px;
  padding: 18px 20px; border: 1px solid #35505d; border-left: 3px solid var(--lane); border-radius: 0 10px 10px 0;
  background: #0d2631; transition: border-color .3s ease;
  min-height: 196px;
}
.xr-lesson .xr-map-detail-kicker { margin: 0; color: var(--lane); font: 500 10px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.xr-lesson .xr-map-detail-name { margin: 4px 0 8px; color: #e6f7fb; font: 500 20px/1.3 var(--display); letter-spacing: -.01em; }
.xr-lesson .xr-map-detail-does { margin: 0; color: #cfe3ea; font: 400 14px/1.65 var(--sans); }
.xr-lesson .xr-map-detail-out { margin: 12px 0 0; color: #9bb5c3; font: 400 13px/1.5 var(--sans); }
.xr-map-detail-out b { color: #e6f7fb; font-weight: 600; }

.xr-map-specimen { margin: 0; padding: 12px 14px; border: 1px solid #2a4552; border-radius: 8px; background: #07151d; }
.xr-map-specimen figcaption { margin-bottom: 10px; color: #87ced8; font: 500 10px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.xr-map-specimen figcaption span { color: #6f8a97; }
.xr-map-specimen svg { display: block; width: 100%; max-width: 280px; height: auto; overflow: visible; }
.xr-lesson .xr-map-specimen-note { margin: 10px 0 0; color: #9bb5c3; font: 400 12px/1.5 var(--sans); }
.xr-lesson .xr-map-specimen-read { margin: 8px 0 0; color: #e6f7fb; font: 400 13px/1.4 var(--mono); }
.xr-map-specimen-read b { font-size: 22px; font-weight: 600; color: var(--map-a); }
.xr-map-specimen-read span { display: block; margin-top: 2px; color: #9bb5c3; font: 400 12px/1.5 var(--sans); }
.xr-lesson .xr-map-code { margin: 0; padding: 0; background: none; color: #cfe3ea; font: 400 12.5px/1.7 var(--mono); white-space: pre; overflow-x: auto; }
.xr-map-code .k { color: #87ced8; }

.xr-map-wave path { fill: none; stroke: var(--map-a); stroke-width: 2; vector-effect: non-scaling-stroke; }
.xr-map-wave .xr-map-wave-env { stroke: #35505d; stroke-width: 1; stroke-dasharray: 3 5; }
.xr-map-mini-grid { fill: none; stroke: #35505d; stroke-width: 1; }
.xr-map-mini-route { fill: none; stroke: #72e5ef66; stroke-width: 1.5; stroke-dasharray: 3 5; }
.xr-map-mini circle[data-level=good] { fill: var(--good); }
.xr-map-mini circle[data-level=fair] { fill: var(--fair); }
.xr-map-mini circle[data-level=poor] { fill: var(--poor); }
.xr-map-mini-bars { fill: none; stroke: var(--map-a); stroke-width: 12; opacity: .75; }
.xr-map-phones rect { fill: #0d2631; stroke: var(--map-b); stroke-width: 1.5; }
.xr-map-phones circle { fill: var(--poor); }
.xr-map-phones-or { stroke: #6f8a97; stroke-width: 1.5; stroke-dasharray: 2 3; }
.xr-map-server rect { fill: #0d2631; stroke: var(--map-b); stroke-width: 1.5; }
.xr-map-server .xr-map-server-box { fill: #0d2631; stroke: #e3dcff; }
.xr-map-server-link { fill: none; stroke: var(--map-b); stroke-width: 1.5; stroke-dasharray: 3 4; }
.xr-map-server-live { fill: var(--poor); }
.xr-map-server text { fill: #e6f7fb; font: 600 10px/1 var(--mono); letter-spacing: .1em; }

/* Motion: data dots run along the lit wires, and the sample wave travels. */
@media (prefers-reduced-motion: no-preference) {
  .xr-active .xr-map-wire.xr-map-lit i { animation: xr-map-flow 1.4s linear infinite; }
  .xr-active .xr-map-wire.xr-map-lit i + i { animation-delay: -.7s; }
  .xr-active .xr-map-wave path:first-child { stroke-dasharray: 260 30; animation: xr-map-wave 2.4s linear infinite; }
  .xr-active .xr-map-phones circle, .xr-active .xr-map-server-live { animation: xr-map-rec 1.6s ease-in-out infinite; }
  .xr-active .xr-map-server-link { animation: xr-map-dash 1.2s linear infinite; }
  .xr-active .xr-map-detail-copy, .xr-active .xr-map-specimen > div { animation: xr-map-in .35s ease-out; }
}
@keyframes xr-map-flow { 0% { left: 0; opacity: 0; } 15%, 80% { opacity: 1; } 100% { left: calc(100% - 6px); opacity: 0; } }
@keyframes xr-map-wave { to { stroke-dashoffset: -290; } }
@keyframes xr-map-rec { 50% { opacity: .3; } }
@keyframes xr-map-dash { to { stroke-dashoffset: -14; } }
@keyframes xr-map-in { from { opacity: 0; transform: translateY(4px); } }

/* Narrow screens: each lane stacks top to bottom, and the wires turn vertical. */
@media (max-width: 760px) {
  .xr-map-row { grid-template-columns: minmax(0, 1fr); }
  .xr-map-stage { min-height: 0; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: none; column-gap: 12px; padding: 12px 14px; }
  .xr-map-stage-top { grid-row: span 3; flex-direction: column; align-items: flex-start; margin: 0; }
  .xr-map-zone { text-align: left; }
  .xr-map-stage-top .xr-map-zone { display: none; }
  .xr-map-out { grid-column: 2; margin-top: 6px; padding-top: 7px; }
  .xr-map-wire { justify-self: start; width: 2px; height: 26px; margin: 3px 0 3px 25px; }
  .xr-map-wire::after { right: auto; top: auto; bottom: -3px; left: -4px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid #2a4552; border-bottom: 0; }
  .xr-map-wire.xr-map-lit::after { border-left-color: transparent; border-top-color: var(--map-a); }
  .xr-map-wire i { left: -2px; top: 0; }
  /* On a phone Draw sits far above, so the join becomes a short wire into a pointer back to it. */
  .xr-map-join { grid-column: 1; display: grid; justify-items: start; }
  .xr-map-join i:first-child { position: relative; left: auto; top: auto; width: 2px; height: 26px; margin: 3px 0 3px 25px; }
  .xr-map-join i + i { display: none; }
  .xr-map-join em {
    position: static; padding: 8px 12px;
    border: 1px dashed var(--join); border-radius: 8px; transition: border-color .3s ease;
  }
  .xr-map-join em::before { content: '↑ '; }
  .xr-map-diagram { padding-left: 22px; }
  .xr-map-lane[data-lane=main]::after { left: -17px; }
  .xr-lesson .xr-map-root { margin-left: -22px; }
  .xr-map-lane::before { left: -17px; width: 12px; }
  .xr-map-detail { grid-template-columns: minmax(0, 1fr); padding: 16px; }
}
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  .xr-active .xr-map-wire.xr-map-lit i { animation-name: xr-map-flow-down; }
}
@keyframes xr-map-flow-down { 0% { top: 0; opacity: 0; } 15%, 80% { opacity: 1; } 100% { top: calc(100% - 6px); opacity: 0; } }