/* The bar of a journey's pages — its story, its manage view — and of its plan in the planner, whose
   bar (planner ui/TopBar.tsx) is drawn the same: one line on the journey's primary `--p`, holding
   bike-stream's mark, which opens the menu (journey-bar.js), the journey's name in its display font
   `--disp`, then on the right its state and the reader's account (account-link.js). Every control is in the body font `--body` at
   13px/600, `--chip-h` tall; a chip is a white veil over the primary, which reads on a dark primary
   as on a saturated one. */
.jbar{position:relative;display:flex;align-items:center;gap:8px;height:42px;padding:0 12px;
  background:var(--p);color:#fff;font-family:var(--body);font-size:13px;font-weight:600;line-height:1;
  --chip-h:28px;--chip-bg:rgba(255,255,255,.16);--chip-hover:rgba(255,255,255,.26);}
/* A page no journey is about — Mes courses, Découvrir, Paramètres, a plan of none — wears
   bike-stream's own look: its default style's colours and fonts (theme-catalog.js DEFAULT_STYLE). */
.jbar.site{--p:#0F172A;--h:#2FE3C4;--disp:'Space Grotesk',sans-serif;--body:'Inter',sans-serif;--disp-ls:-.5px;}
.jbar-mark{flex:none;display:flex;align-items:center;justify-content:center;width:var(--chip-h);height:var(--chip-h);
  padding:0;border:0;border-radius:8px;background:#fff;color:var(--p);font-size:17px;cursor:pointer;}
.jbar-mark:hover,.jbar-mark[aria-expanded="true"]{background:rgba(255,255,255,.85);}
.jbar-name{font-family:var(--disp);font-weight:400;font-size:17px;line-height:1.25;letter-spacing:var(--disp-ls,0);
  flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff;}
/* The journey's state, the bar's one capitalised label: a pulsing dot while it is live, a still soft
   white one before (.pre) and after (.finished). */
.jbar-status{flex:none;display:inline-flex;align-items:center;gap:7px;height:var(--chip-h);padding:0 11px;border:0;
  border-radius:999px;background:var(--chip-bg);color:#fff;font:inherit;font-size:11px;letter-spacing:.07em;white-space:nowrap;}
.jbar-status .dot{width:8px;height:8px;border-radius:50%;background:var(--h);
  box-shadow:0 0 0 0 color-mix(in srgb,var(--h) 70%,transparent);animation:jbar-pulse 1.6s infinite;}
.jbar-status:is(.pre,.finished) .dot{background:rgba(255,255,255,.55);box-shadow:none;animation:none;}
@keyframes jbar-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--h) 70%,transparent)}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
@media (prefers-reduced-motion:reduce){.jbar-status .dot{animation:none;}}
/* While the rider broadcasts, the story's state becomes a switch between the story and its live:
   EN ROUTE | LIVE, the view shown filled in white; the live's dot red. */
.jbar-switch{flex:none;display:inline-flex;align-items:center;gap:2px;height:var(--chip-h);padding:2px;box-sizing:border-box;
  border-radius:999px;background:var(--chip-bg);}
.jbar-switch[hidden]{display:none;}
.jbar-switch button{display:inline-flex;align-items:center;gap:6px;height:100%;padding:0 9px;border:0;border-radius:999px;
  background:transparent;color:#fff;font:inherit;font-size:11px;letter-spacing:.06em;white-space:nowrap;cursor:pointer;}
.jbar-switch button:hover{background:var(--chip-hover);}
.jbar-switch button[aria-selected="true"]{background:#fff;color:var(--p-ink,var(--p));}
.jbar-switch .dot{width:7px;height:7px;border-radius:50%;background:var(--h);}
.jbar-switch [data-view="live"] .dot{background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.3);}
.jbar-switch [data-view="live"][aria-selected="true"] .dot{background:#d62828;box-shadow:none;}
.jbar-switch button[hidden],.jbar-switch.done [data-view="course"] .dot{display:none;}
.jbar-switch [data-view="replay"] i{font-size:10px;}
/* A page's bar held at the top of the window while the page scrolls under it. */
.jbar-page{position:sticky;top:0;z-index:20;}
/* The bar's right end: the journey's state, then the reader's avatar or Settings' gear. */
.jbar-end{margin-left:auto;flex:none;display:flex;align-items:center;gap:8px;}
.jbar-me{flex:none;display:inline-flex;align-items:center;justify-content:center;width:var(--chip-h);height:var(--chip-h);
  border-radius:50%;color:#fff;text-decoration:none;font-size:18px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.45);}
.jbar-me:hover{background:var(--chip-bg);}
.jbar-me .av{width:calc(var(--chip-h) - 6px);height:calc(var(--chip-h) - 6px);border-radius:50%;display:flex;
  align-items:center;justify-content:center;font-size:11px;color:#fff;}
@media (min-width:960px){
  .jbar{height:50px;--chip-h:30px;}
  .jbar-name{font-size:20px;}
}

/* The menu, under the mark: the journey's pages, then the site's; the page open is marked. */
.jmenu{position:absolute;top:calc(100% + 6px);left:8px;z-index:40;min-width:250px;max-width:calc(100vw - 16px);padding:6px;
  border-radius:14px;background:var(--surface);color:var(--fg);border:1px solid var(--line);
  font-family:var(--body);font-size:14px;font-weight:600;line-height:1.2;box-shadow:0 14px 40px rgba(15,23,42,.25);}
.jmenu[hidden]{display:none;}
.jmenu .hd{padding:8px 12px 4px;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.jmenu a{display:flex;align-items:center;gap:11px;height:40px;padding:0 12px;border-radius:9px;color:inherit;text-decoration:none;}
.jmenu a:hover,.jmenu a[aria-current="page"]{background:var(--surface2);}
.jmenu a i{font-size:18px;color:var(--muted);}
.jmenu a .ok{margin-left:auto;color:var(--p-ink);}
.jmenu hr{border:0;border-top:1px solid var(--line);margin:6px 4px;}