/* The map on the Overview, under the org's name: three lines from it into
   three columns -- the org's own steps, whose end runs into the lock on
   the line to the draft's sides; the sides in a row with the steps they
   share under them, the spectator in the row with them on a line from
   the lock; the split's cells as a ring running left from the line and
   its steps as a ring under them, each round again up the line.
   The reader's own road is lit, steps and lines, and over everything. The page scrolls as a page; where the
   map is wider than the window it pans on a drag, no scrollbar, and zooms
   with shift and the wheel or + and -. A node a step, a line with the
   site's chevron at its end, the gaps all one size so no line is short;
   every line its own, the lit one drawn last. What is not the reader's
   folds away behind the one plus, the lock's. A node is ticked
   when done, ringed where you are; hover for a line on it. A line or a
   role's bubble under the pointer lights its whole trail, steps and
   lines, the rest dimmed, with whose it is beside the pointer; a line
   pressed stays lit. */
/* Edge to edge: out of the page's gutters, so a wide map pans across the whole window. */
.orgMapSec { position: relative; margin: 2px -20px 0; }
.mapScroll { position: relative; overflow: hidden; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.mapScroll.isPanning { cursor: grabbing; }
.mapScroll:focus-visible { outline: 1px solid var(--gold-dim); outline-offset: -1px; }
.mapSurface { --tight: 40px; --wide: 56px; --lat: 130px; --stackg: 80px; --sideg: 16px; position: relative; transform-origin: 0 0; visibility: hidden; }
.mapSurface.isLaid { visibility: visible; }
.mapLines { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.mapLines path { fill: none; stroke: var(--border); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.mapLines path.isDone { stroke: var(--gold-dim); }
/* The trail: every line on the hovered line's roads, gold and heavier. The strip under each line is the line fat and unseen, to take the pointer. */
.mapLines path.isTrail { stroke: var(--gold); stroke-width: 2.2; }
.mapLines .mapHit { pointer-events: stroke; stroke: transparent; stroke-width: 14; cursor: pointer; }
/* The steps on the lit road gold with its lines -- the reader's own by default. While another road is hovered or pressed, everything else, the reader's own route too, is dimmed, so what that road skips reads as skipped. */
.mapNode.isTrail { color: var(--gold); border-color: var(--gold); }
.mapScroll.hasTrail .mapLines path:not(.isTrail):not(.mapHit) { opacity: 0.3; }
.mapScroll.hasTrail .mapNode:not(.isTrail) { opacity: 0.3; filter: grayscale(1); }
.mapScroll.hasTrail .mapNode.isTrail { opacity: 1; filter: none; }
.mapNode {
    position: absolute; z-index: 1; display: inline-flex; align-items: center; gap: 7px;
    height: 32px; box-sizing: border-box; padding: 0 12px 0 9px; border: 1px solid var(--border); border-radius: 999px;
    background: var(--bg); color: var(--text); font-family: var(--font-mono); font-size: 0.72rem; text-decoration: none; white-space: nowrap;
    cursor: pointer; transform-origin: center; transition: border-color 0.15s, color 0.15s, transform 0.15s;
}
.mapNode.isHidden { display: none; }
/* Under the pointer: its edge lit and its whole name shown; no growing, which threw the plus out from under the pointer. */
.mapNode:hover { z-index: 2; border-color: var(--gold-dim); }
.mapNode:hover .mapWord { max-width: none; }
/* A long name, the form's, is cut short of a column's worth. */
.mapWord { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.mapTick { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 13px; height: 13px; border: 1px solid var(--border); border-radius: 3px; font-size: 9px; line-height: 1; color: var(--on-gold); }
.mapNode.is-done { border-color: var(--gold-dim); }
.mapNode.is-done .mapTick { background: var(--gold); border-color: var(--gold); }
/* Your next step ringed; the cell that is on gold, no ring. */
.mapNode.is-here, .mapNode.is-now { color: var(--gold); border-color: var(--gold); }
/* The step a link sent you to: ringed until you move on. */
.mapNode.is-asked { color: var(--gold); border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 28%, transparent); animation: mapAsked 1.1s ease-in-out 3; }
@keyframes mapAsked { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--gold) 14%, transparent); } }
@media (prefers-reduced-motion: reduce) { .mapNode.is-asked { animation: none; } }
.mapNode.is-here { box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent); }
.mapNode.is-here .mapTick { border-color: var(--gold); }
/* The cell that is on, once it has begun: gold and ticked. */
.mapNode.is-now.isStarted .mapTick { background: var(--gold); border-color: var(--gold); }
/* Not yours: grey, the word struck through -- a step you do not take. A side is a choice, not struck; a cell is everyone's. */
.mapNode.isOff { color: var(--text-muted); opacity: 0.45; filter: grayscale(1); }
.mapNode.isOff:hover { opacity: 1; filter: none; }
.mapNode.isOff:not(.isTrail):not(.isSide):not([data-band="cycle"]):not(.is-done) .mapWord, .mapNode[data-event].isOff:not(.isTrail):not(.is-done) .mapWord { text-decoration: line-through; }
/* Not yours but done -- the org's steps to a visitor: ticked, grey like the rest of what is not theirs, not lit. */
.mapNode.isOff.is-done { border-color: var(--border); }
.mapScroll.hasTrail .mapNode:not(.isTrail):not(.isSide):not([data-band="cycle"]) .mapWord, .mapScroll.hasTrail .mapNode[data-event]:not(.isTrail) .mapWord { text-decoration: line-through; }
/* The boxes along the lit road not yet ticked: the page's grey, not the line's colour -- each waits on the one before. */
.mapNode.isTrail:not(.is-done) .mapTick { border-color: var(--text-muted); }
/* The one circle, at the lock's bottom right: a plus that puts everything out, a minus that folds it back. */
.mapMore {
    position: absolute; right: -3px; bottom: -9px; z-index: 3; width: 17px; height: 17px; padding: 0; border-radius: 50%;
    border: 1px solid var(--gold-dim); background: var(--bg-card); color: var(--gold); font: 700 12px/15px var(--font-mono); cursor: pointer; text-align: center;
}
.mapMore[hidden] { display: none; }
.mapMore:hover { background: var(--gold); color: var(--on-gold); }
/* The lock on the line into the sides: red and shut until the org's steps
   are done, green and open then. The plus at its corner unfolds those
   steps. */
.mapLock {
    position: absolute; z-index: 2; width: 26px; height: 26px; margin: -13px 0 0 -13px; padding: 0; border-radius: 50%;
    border: 1px solid var(--border); background: var(--bg-card); color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.mapLock svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.mapLock.isLocked { color: var(--red-x); border-color: var(--red-x); background: color-mix(in srgb, var(--red-x) 14%, var(--bg-card)); }
.mapLock.isUnlocked { color: var(--ok); border-color: var(--ok); background: color-mix(in srgb, var(--ok) 18%, var(--bg-card)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 20%, transparent); }
.mapLock:hover { filter: brightness(1.2); }
.mapLockMore { right: auto; bottom: auto; margin: -9px 0 0 -9px; }
/* A line on the step under the pointer. */
.mapTip { position: absolute; z-index: 5; max-width: 260px; padding: 5px 9px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-card); color: var(--text); font-family: var(--font-mono); font-size: 0.68rem; line-height: 1.4; pointer-events: none; white-space: normal; }
.mapTip[hidden] { display: none; }
/* Top, or Current: the same tab as Lookup's, hung from the top of the window once the org's name has scrolled away. */
.mapTop {
    position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 40; height: 26px; padding: 0 12px;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    background: var(--bg-card); color: var(--gold); border: 1px solid var(--gold-dim); border-top: 0; border-radius: 0 0 8px 8px; cursor: pointer;
    font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.04em; text-transform: uppercase;
}
.mapTop[hidden] { display: none; }
.mapTop:hover { background: var(--bg); border-color: var(--gold); }
.mapTop svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* Your step below the window: the tab hangs from the bottom edge instead, pointing down. */
.mapTop.isDown { top: auto; bottom: 0; border-top: 1px solid var(--gold-dim); border-bottom: 0; border-radius: 8px 8px 0 0; }
.mapTop.isDown svg { transform: rotate(180deg); }
@media (max-width: 640px) {
    .mapSurface { --tight: 34px; --wide: 48px; --lat: 110px; --stackg: 68px; --sideg: 12px; }
    .mapWord { max-width: 120px; }
}