/* journey.css: the visit as a route, down the left side of the six public pages (2026-10-21). Built by js/journey.js.
   Same slab as everything else: the rail is a debossed well, a page not yet seen is a hollow well, Next stop is a raised
   key. Orange (--orange) is only ever a FILL here; anything written in orange uses --orange-ink (see home.css :root).
   1440 and wider   the whole rail, a column of 178px beside the page, which moves right to make room.
   701 to 1439      folded to a column of dots, 34px; a dot shows its name in a small dark tip on hover or focus.
   700 and under    no column: a 3px line on the right edge fills with the page, and a section's name passes by.
   The rail is position:fixed rather than sticky, which looks the same here (it sits under the sticky header at the top
   of the tray and stays there) and needs no wrapper round <main>: the home page slides <main> by a transform. */

.journey{display:none}
.jr-edge,.jr-pill{display:none}

/* ---------- 701 and wider: the folded rail, a column of dots ---------- */
@media (min-width:701px){
  :root{--jr-w:34px}
  .journey{display:block;position:fixed;z-index:50;left:var(--edge);top:calc(56px + var(--edge) * 2);width:var(--jr-w);
    padding:12px 0 14px;border-radius:17px;background:var(--g);box-shadow:var(--well-sm);font-family:var(--display)}
  .journey:empty{visibility:hidden}                            /* the column keeps its room from the first paint; the script fills it */
  .journey ~ main{margin-left:calc(var(--jr-w) + var(--gap))}
  .journey ol{list-style:none;margin:0;padding:0}
  .jr-t{display:none}
  .jr-map{position:relative}
  .jr-route{display:flex;flex-direction:column;align-items:center;gap:8px}
  .journey .jr-secs{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:6px}
  .journey a{position:relative;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;color:var(--faint)}
  .journey .jr-s{height:16px}
  /* the names are still there for screen readers and as each link's name; only the eye loses them */
  .jr-n,.jr-s b,.jr-k{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

  /* the line through the dots: ink as far as the page you are on, then orange for how much of it you have read */
  .jr-track{position:absolute;left:50%;width:2px;margin-left:-1px;border-radius:2px;background:rgba(158,169,194,.45)}
  .jr-ink,.jr-lit{position:absolute;left:0;width:100%;border-radius:2px}
  .jr-ink{top:0;background:var(--ink)}
  .jr-lit{background:var(--orange);transform-origin:50% 0;transform:scaleY(0)}

  /* dots: a page not seen yet is a hollow well; seen, ink; the page you are on, orange with a soft orange ring */
  .jr-dot{position:relative;z-index:1;display:block;width:10px;height:10px;border-radius:50%;background:var(--g);
    box-shadow:inset 1.5px 1.5px 3px var(--lo),inset -1.5px -1.5px 3px var(--hi)}
  .is-seen>a .jr-dot{background:var(--ink);box-shadow:none}
  .is-now>a .jr-dot{background:var(--orange);box-shadow:0 0 0 4px rgba(255,77,0,.18)}
  .jr-s .jr-dot{width:6px;height:6px;box-shadow:inset 1px 1px 2px var(--lo),inset -1px -1px 2px var(--hi)}
  .jr-s.is-read .jr-dot{background:var(--muted);box-shadow:none}
  .jr-s.is-here .jr-dot{width:8px;height:8px;background:var(--orange);box-shadow:0 0 0 3px rgba(255,77,0,.18)}

  /* Next stop: a small raised key with the arrow */
  .journey .jr-next{width:26px;height:26px;margin:14px auto 0;box-shadow:var(--raised-sm);color:var(--ink);font-size:13px;line-height:1}
  .journey .jr-next:hover{box-shadow:var(--well-sm)}

  /* the tip: the name of a dot, dark, beside it, on hover or keyboard focus */
  .journey a::after{content:attr(data-tip);position:absolute;left:calc(100% + 12px);top:50%;transform:translate(-4px,-50%);
    padding:6px 10px;border-radius:10px;background:var(--ink);color:#fff;font-size:12px;font-weight:400;line-height:1.2;
    letter-spacing:0;text-transform:none;white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .2s var(--out),transform .2s var(--out),visibility 0s linear .2s}
  .journey a:hover::after,.journey a:focus-visible::after{opacity:1;visibility:visible;transform:translate(0,-50%);
    transition:opacity .2s var(--out),transform .2s var(--out),visibility 0s}

  /* short and moving: the states change in about 200ms, and only once the first state is drawn */
  .journey.is-live .jr-dot{transition:background-color .2s var(--out),box-shadow .2s var(--out),width .2s var(--out),height .2s var(--out)}
  .journey.is-live .jr-lit{transition:transform .2s var(--out)}
  .journey.is-live a{transition:color .2s var(--out),box-shadow .2s var(--out)}
}

/* ---------- Nunu's seat: a small well below the rail card, placed by js/journey.js (only if it fits). The canvas is bigger than
   the well (the ball fills 0.59 of it), and travels between here, the page and the flying layer. ---------- */
.jr-seat,.jr-fly{display:none}
@media (min-width:701px){
  .jr-seat{position:fixed;z-index:50;border-radius:50%;background:var(--g);box-shadow:var(--well-sm);pointer-events:none;opacity:0;visibility:hidden;transition:opacity .15s var(--out),visibility 0s linear .15s}
  .jr-seat.on{opacity:1;visibility:visible;transition:opacity .15s var(--out),visibility 0s}
  .jr-fly{display:block;position:fixed;inset:0;z-index:70;pointer-events:none}
  .jr-seat canvas.jr-cv{position:absolute;left:50%;top:50%;width:150%;height:150%;margin:-75% 0 0 -75%;display:block;pointer-events:none}
  .jr-fly canvas.jr-air{position:absolute;left:0;top:0;display:block;transform-origin:50% 50%;will-change:transform;pointer-events:none}
}

/* ---------- 1440 and wider: the whole rail ---------- */
@media (min-width:1440px){
  :root{--jr-w:178px}
  .journey{padding:14px 12px 16px;border-radius:18px;max-height:calc(100vh - 56px - var(--edge) * 3);overflow-y:auto;scrollbar-width:thin}   /* no overscroll containment: with a link in here focused, the arrow keys must still scroll the page */
  .jr-t{display:block;margin:0 0 10px 2px;font-size:11.5px;line-height:1.3;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
  .jr-route{display:block}
  .journey .jr-secs{display:block;margin:2px 0 6px}
  .journey a{display:block;width:auto;height:auto;border-radius:8px;place-items:normal}   /* normal: centred items would centre the block children too */
  .jr-n,.jr-s b,.jr-k{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;white-space:normal}
  .journey a::after{display:none}

  .jr-p>a{padding:4px 0 4px 22px;font-size:13px;line-height:1.35}
  .jr-p>a .jr-dot{position:absolute;left:1px;top:7px;width:12px;height:12px}
  .journey .jr-s{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:6px;height:auto;padding:3px 0 3px 22px;font-size:12px;line-height:1.35}   /* a long name wraps under itself, not under its number */
  .jr-s .jr-dot{display:none}
  .jr-s b{font-size:11px;font-weight:400;line-height:16.2px;letter-spacing:.04em;font-variant-numeric:tabular-nums}
  .jr-track{left:6px;margin-left:0}

  .is-seen>a{color:var(--ink)}
  .is-now>a{color:var(--orange-ink);font-weight:500}
  .jr-s.is-read{color:var(--muted)}
  .jr-s.is-here{color:var(--ink);font-weight:500}
  .jr-s.is-here b{color:var(--orange-ink)}
  .jr-p:not(.is-now)>a:hover,.jr-s:hover{color:var(--ink)}

  .journey .jr-next{display:block;width:auto;height:auto;margin:14px 0 0;padding:9px 12px;border-radius:14px;font-size:13px;line-height:1.35}
  .jr-next .jr-k{display:block;margin-bottom:1px;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
  .jr-next .jr-n{font-weight:500}
  .jr-next .jr-arrow{margin-left:6px}
}

/* ---------- the home page's first screen, beside the rail. Its sizes are read from the window (vw), and the rail takes
   some of the window away, so the two that the rail actually upsets are read from what is left: the headline keeps its
   share of the board (and its distance from the globe), and the caption pill, which wrapped in four columns, gets six
   (the row is empty up to Nunu's two, which start at column 8). ---------- */
@media (min-width:1101px){
  .journey ~ main .head h1{font-size:clamp(48px,calc((100vw - var(--jr-w) - var(--gap)) * .062),120px)}
  .journey ~ main .open{grid-column:1 / span 6}
  /* the Atlas sign in: the copyright line in the bottom corner ran under the centred plate once the tray was narrower,
     so each corner line is held to the room beside the plate (the plate's width is .authcol's in pages.css) and wraps */
  .journey ~ main .authbase>span{max-width:calc((100% - min(100%, 680px, (100dvh - 535px) * 1.6)) / 2 - 16px)}
}
/* the same for Our intelligence's headline, which went from two lines to three beside the full rail */
@media (min-width:701px){
  body:not(.lean) .journey ~ main .ph-head h1{font-size:clamp(40px,calc((100vw - var(--jr-w) - var(--gap)) * .054),102px)}
}

/* ---------- 700 and under: no column. A thin line on the right edge, and a section's name as it arrives ---------- */
@media (max-width:700px){
  .jr-edge{display:block;position:fixed;z-index:55;right:3px;top:80px;bottom:14px;width:3px;border-radius:3px;background:rgba(158,169,194,.35);pointer-events:none}
  .jr-edge i{position:absolute;inset:0;border-radius:inherit;background:var(--orange);transform-origin:50% 0;transform:scaleY(0);transition:transform .2s var(--out)}
  /* in the middle of the right hand side: clear of the burger above and of the thumb below */
  .jr-pill{display:block;position:fixed;z-index:55;right:14px;top:40%;max-width:calc(100vw - 48px);padding:7px 12px;border-radius:12px;
    background:var(--ink);color:#fff;font-family:var(--display);font-size:12.5px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    pointer-events:none;opacity:0;transform:translateX(6px);transition:opacity .2s var(--out),transform .2s var(--out)}
  .jr-pill.on{opacity:1;transform:none}
  .jr-pill b{margin-right:4px;font-weight:400;opacity:.7;font-variant-numeric:tabular-nums}
}

@media (prefers-reduced-motion:reduce){
  .journey *,.journey a::after,.jr-edge i,.jr-pill{transition:none !important}
}