/* Shared by all seven stories. Page styles own their scenes, this owns the bar. */
.tour-bar.axm-tourbar{position:fixed;z-index:30;inset:auto clamp(22px,5.4vw,104px) 0;height:76px;box-sizing:border-box;display:grid;grid-template-columns:64px minmax(0,1fr) 44px;align-items:center;gap:28px;margin:0;padding:0 0 env(safe-area-inset-bottom);border-top:1px solid #ffffff24;background:linear-gradient(#24272aed,#24272a);font-family:inherit;font-size:11px;font-weight:400;letter-spacing:0;text-transform:none;transition:transform .3s,opacity .3s}
.axm-tourbar .tour-count{display:flex;align-items:center;justify-content:flex-start;gap:6px;white-space:nowrap;margin:0;padding:0;font-size:11px;line-height:1.4;font-weight:400;font-variant-numeric:tabular-nums;color:#92999d}
.axm-tourbar .tour-count b{font-weight:500;color:var(--tour-accent)}
.axm-tourbar .chapter-nav{display:flex;flex:initial;align-items:center;justify-content:flex-start;gap:clamp(20px,2.2vw,36px);min-width:0;width:auto;margin:0;padding:4px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain;scroll-behavior:auto}
.axm-tourbar .chapter-nav::-webkit-scrollbar{display:none}
.axm-tourbar .chapter-nav a{position:relative;display:flex;flex:none;flex-direction:row;align-items:center;min-width:0;min-height:44px;gap:0;margin:0;padding:0;color:#afb5b8;font-size:11px;font-weight:400;line-height:1.35;letter-spacing:0;text-transform:none;white-space:nowrap;text-decoration:none;transition:color .2s}
.axm-tourbar .chapter-nav a:hover,.axm-tourbar .chapter-nav a[aria-current=step]{color:var(--tour-accent)}
.axm-tourbar a:focus-visible{outline:1px solid var(--tour-accent);outline-offset:3px;border-radius:2px}
.axm-tourbar .next-step{display:flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;margin:0;padding:0;border:1px solid #ffffff24;border-radius:50%;color:var(--tour-accent);background:transparent;transition:color .2s,border-color .2s}
.axm-tourbar .next-step:hover{border-color:var(--tour-accent)}
.axm-tourbar .arrow{position:relative;display:block;width:12px;height:12px;border:none;background:none;transform:rotate(135deg)}
.axm-tourbar .arrow::before{content:'';position:absolute;inset:0;border-top:1px solid currentColor;border-right:1px solid currentColor}
.axm-tourbar .arrow::after{content:'';position:absolute;right:0;top:0;width:16px;height:1px;background:currentColor;transform:rotate(-45deg);transform-origin:100% 0}
.axm-tourbar .tour-progress{position:absolute;inset:-1px 0 auto;display:block;height:1px;pointer-events:none;background:transparent;transform:none}
.axm-tourbar #tour-progress{display:block;width:100%;height:1px;background:var(--tour-accent);transform:scaleX(0);transform-origin:left center}
.experience.is-ended .axm-tourbar{transform:translateY(100%);opacity:0;visibility:hidden;pointer-events:none}
@media(max-width:700px){.tour-bar.axm-tourbar{left:20px;right:20px;height:calc(64px + env(safe-area-inset-bottom));grid-template-columns:52px minmax(0,1fr) 44px;gap:12px}.axm-tourbar .tour-count,.axm-tourbar .chapter-nav a{font-size:10px}.axm-tourbar .chapter-nav{gap:22px}}
@media(max-height:500px){.tour-bar.axm-tourbar{height:60px}}
@media(prefers-reduced-motion:reduce){.tour-bar.axm-tourbar,.axm-tourbar a{transition:none}}
/* Keyboard: the bar lives inside the isolated story layer, so the outro and footer (z-index 40) paint over it at the
   end of the page. While it holds keyboard focus, lift the whole story layer above them, still under the header, so
   the focused chapter link stays visible (E1). Mouse clicks do not trigger it. */
.experience:has(.axm-tourbar :focus-visible){z-index:60}
/* Keyboard focus inside a chapter is scrolled clear of the fixed header and chapter bar (E1, E7). */
html:has(.axm-tourbar){scroll-padding-top:96px;scroll-padding-bottom:100px}
/* Short windows, 200 % zoom and phones held sideways: a lower header and a denser, opaque bar leave room for the
   chapter itself (E11, X3). Only the seven stories and the home page load this file. */
@media(max-height:520px){
  .axm-header{height:56px}
  .tour-bar.axm-tourbar{height:48px;background:#24272a;gap:18px}
  .axm-tourbar .tour-count{font-size:10px}
}
/* A1 begin — 18.10.2026 (axm.tech audit M1, M2, M3): on phones the chapter bar is fully opaque and the copy fades out
   just above it (desktop keeps the translucent bar: there the last lines of a chapter may sit behind it — A2), so text never runs through the bar or under its progress line. Phone: chapter links are at least 40 px
   wide, bar labels 11 px. */
@media(max-width:760px){
  .tour-bar.axm-tourbar{background:#24272a}
  .tour-bar.axm-tourbar::before{content:'';position:absolute;z-index:-1;left:-24px;right:-24px;bottom:100%;height:32px;pointer-events:none;background:linear-gradient(rgba(36,39,42,0),#24272a)}
  .axm-tourbar .tour-count,.axm-tourbar .chapter-nav a{font-size:11px}
  .axm-tourbar .chapter-nav a{min-width:40px;justify-content:center}
}
/* A1 end */
