/* The sticky left rail: wordmark, Human/Agent switch, site nav, and the "On this page" index. */

.rail {
  --h: 0.52s;
  position: sticky;
  top: 0;
  padding-block: var(--sp-rail-top) 48px;
}

/* ---------- logo: the AIVC icon on its own, Black 100, with a half-height safe zone ---------- */

.brand {
  display: inline-flex;
  color: var(--logo);
  text-decoration: none;
}
.brand svg {
  display: block;
  width: 134.4px;
  height: 32px;
}

.logo-hover {
  display: inline-flex;
  cursor: pointer;
}
.logo-static {
  display: inline-flex;
}

/* the icon traces its outline, then the fill lands and the outline hands over to it.
   pathLength="1" on each path makes the dash values size-independent. */
.logo-stroke {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  fill-opacity: 0;
  stroke-opacity: 1;
  animation: logo-draw 1.5s cubic-bezier(0.5, 0, 0, 1) forwards;
}
.logo-stroke-2 {
  animation-delay: 0.15s;
}
.logo-hover:hover .logo-stroke {
  animation: logo-redraw 1s cubic-bezier(0.5, 0, 0, 1) forwards;
}
.logo-hover:hover .logo-stroke-2 {
  animation-delay: 0.12s;
}

@keyframes logo-draw {
  0% {
    stroke-dashoffset: 1;
    fill-opacity: 0;
    stroke-opacity: 1;
  }
  62% {
    fill-opacity: 0;
    stroke-opacity: 1;
  }
  100% {
    stroke-dashoffset: 0;
    fill-opacity: 1;
    stroke-opacity: 0;
  }
}
@keyframes logo-redraw {
  0% {
    stroke-dashoffset: 0;
    fill-opacity: 1;
    stroke-opacity: 1;
  }
  45% {
    stroke-dashoffset: 1;
    fill-opacity: 0;
  }
  80% {
    fill-opacity: 0;
    stroke-opacity: 1;
  }
  100% {
    stroke-dashoffset: 0;
    fill-opacity: 1;
    stroke-opacity: 0;
  }
}

/* ---------- Human / Agent switch ---------- */

.format-wrap {
  margin-top: 20px;
}
.format-switch {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--rule);
  border-radius: 7px;
  background: var(--paper);
  font-family: var(--font);
  font-size: 11px;
  line-height: 16px;
  white-space: nowrap;
}
.format-switch a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 11px;
  border-radius: 4px;
  color: var(--ink-68);
  text-decoration: none;
  transition:
    color var(--dur-hover) var(--ease-hover),
    background-color var(--dur-hover) var(--ease-hover);
}
.format-switch a[aria-current] {
  background: #fff;
  color: var(--ink);
  font-weight: 600;
  box-shadow: 0 1px 3px #0b10151f;
}
.format-switch a:not([aria-current]):hover {
  background: var(--accent-tint-strong);
  color: var(--accent-text);
}
.format-switch a:focus-visible {
  outline-offset: 1px;
}

/* ---------- nav lists ---------- */

.nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.rail .nav:first-of-type {
  margin-top: 40px;
}
.nav a {
  color: var(--ink-68);
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: -0.006em;
  text-decoration: none;
  transition: color var(--dur-hover) var(--ease-hover);
}
.nav a:hover,
.nav a[aria-current] {
  color: var(--ink);
}
.nav a:focus-visible {
  outline-offset: 4px;
}
.nav-doors a[aria-current] {
  font-weight: 500;
}

/* external doors (Docs, Console) get the sliding arrow glyph */
.nav-doors a[data-external] {
  --door: 12px;
  display: inline-flex;
  align-items: center;
}
.nav-doors a[data-external]::after {
  content: "" / " (external)";
  flex: none;
  width: var(--door);
  height: var(--door);
  margin-inline-start: calc(var(--door) / 2);
  background-color: var(--ink-45);
  -webkit-mask: var(--door-mask) 0 calc(-1 * var(--door)) / calc(2 * var(--door)) calc(2 * var(--door)) no-repeat;
  mask: var(--door-mask) 0 calc(-1 * var(--door)) / calc(2 * var(--door)) calc(2 * var(--door)) no-repeat;
  translate: 0 0.5px;
  transition: background-color var(--dur-hover) var(--ease-hover);
}
.nav-doors a[data-external]:hover::after,
.nav-doors a[data-external]:focus-visible::after {
  background-color: var(--ink);
  -webkit-mask-position: calc(-1 * var(--door)) 0;
  mask-position: calc(-1 * var(--door)) 0;
  transition:
    background-color var(--dur-hover) var(--ease-hover),
    -webkit-mask-position 0.32s var(--ease-out),
    mask-position 0.32s var(--ease-out);
}

/* the square that marks the current door */
.nav-mark {
  position: absolute;
  top: 0;
  left: -16px;
  width: 6px;
  height: 6px;
  background: var(--accent-text);
  pointer-events: none;
  transform: translateY(var(--y, 8px)) rotate(var(--r, 0deg));
  transition:
    transform 0.4s var(--ease-standard),
    opacity var(--dur-hover) var(--ease-hover);
}
.nav-mark.is-off {
  opacity: 0;
}

.rail-rule {
  width: 100%;
  height: 1px;
  margin: 24px 0;
  border: 0;
  background: repeating-linear-gradient(90deg, var(--rule) 0 4px, transparent 4px 8px);
}

/* ---------- "On this page" index ---------- */

.nav-here {
  --y: -99;
  position: relative;
}
.nav-here::before {
  content: "On this page";
  color: var(--ink-60);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.nav-here a {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 100%;
  color: var(--ink-60);
  text-wrap: pretty;
}
.nav-here a:hover,
.nav-here a:focus-visible {
  color: var(--ink);
}
.nav-here a[aria-current] {
  color: var(--ink);
  font-weight: 500;
}

/* each entry's dash, and the minor ticks between entries, swell as the reading position (--y) passes them */
.nav-here a::before,
.nav-ruler i {
  --l: max(0, calc(1 - abs(var(--t, 0) - var(--y)) / 4));
  content: "";
  display: block;
  width: 24px;
  border-radius: 1px;
  transform-origin: 0;
  transition:
    scale 0.3s var(--ease-out),
    background-color var(--dur-hover) var(--ease-hover);
}
.nav-here a::before {
  flex: none;
  height: 2px;
  margin-top: 9.5px;
  background: #0b101538;
  scale: calc(0.5 + 0.5 * var(--l)) 1;
}
.nav-here a:has(~ a[aria-current])::before,
.nav-here a[aria-current]::before {
  background: var(--accent-text);
}
.nav-ruler {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.nav-ruler i {
  position: absolute;
  left: 0;
  height: 1px;
  background: #0b101524;
  scale: calc(0.25 + 0.5 * var(--l)) 1;
}

/* ---------- arrival: the rail fades in once fonts are ready, then its parts stagger in ---------- */

html.js .rail[data-reveal] {
  translate: 0;
  transition-duration: 0.4s;
}
html.js .rail[data-reveal] .nav a {
  opacity: 0;
  translate: 0 10px;
  transition:
    color var(--dur-hover) var(--ease-hover) 0s,
    opacity 0.4s var(--ease-standard) calc(0.12s + var(--k, 0) * 80ms),
    translate 0.4s var(--ease-standard) calc(0.12s + var(--k, 0) * 80ms);
}
html.js .rail[data-reveal].is-visible .nav a {
  opacity: 1;
  translate: 0;
}
html.js .rail[data-reveal] .nav-here a {
  transition: color var(--dur-hover) var(--ease-hover);
}
html.js .rail[data-reveal]:not(.is-visible) .logo-stroke {
  animation-play-state: paused;
}
html.js .rail[data-reveal]:not(.is-visible) .rail-rule,
html.js .rail[data-reveal]:not(.is-visible) .nav-here::before,
html.js .rail[data-reveal]:not(.is-visible) .nav-ruler {
  opacity: 0;
}
html.js .rail[data-reveal].is-visible .rail-rule {
  animation: draw-across 0.5s var(--ease-out) var(--h) backwards;
}
html.js .rail[data-reveal].is-visible .nav-here::before {
  animation: rise-in 0.4s var(--ease-standard) calc(var(--h) + 80ms) backwards;
}
html.js .rail[data-reveal].is-visible .nav-here a {
  animation: rise-in 0.4s var(--ease-standard) calc(var(--h) + 0.16s + var(--j, 0) * 60ms) backwards;
}
html.js .rail[data-reveal].is-visible .nav-ruler {
  animation: fade-in 0.5s var(--ease-standard) calc(var(--h) + 0.26s) backwards;
}

/* ---------- phone menu button (only shown under 520px) ---------- */

.menu {
  position: relative;
  display: none;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-60);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--dur-hover) var(--ease-hover);
}
.menu::after {
  content: "";
  position: absolute;
  inset: -8px -6px;
}
.menu:hover {
  color: var(--ink);
}
.menu:focus-visible {
  outline-offset: 2px;
}
.menu-word {
  display: grid;
}
.menu-word > span {
  grid-area: 1 / 1;
  text-align: right;
  transition:
    opacity 0.2s var(--ease-out),
    translate 0.2s var(--ease-out);
}
.menu-shut {
  opacity: 0;
  translate: 0 6px;
}
.menu[aria-expanded="true"] .menu-word > span:first-child {
  opacity: 0;
  translate: 0 -6px;
}
.menu[aria-expanded="true"] .menu-shut {
  opacity: 1;
  translate: 0;
}
.menu-glyph {
  position: relative;
  width: 12px;
  height: 12px;
}
.menu-glyph i {
  position: absolute;
  top: 3.5px;
  left: 0;
  right: 0;
  height: 1.5px;
  background: currentColor;
  transition:
    translate 0.24s var(--ease-out),
    rotate 0.24s var(--ease-out);
}
.menu-glyph i + i {
  top: 7px;
}
.menu[aria-expanded="true"] .menu-glyph i {
  translate: 0 1.75px;
  rotate: 45deg;
}
.menu[aria-expanded="true"] .menu-glyph i + i {
  translate: 0 -1.75px;
  rotate: -45deg;
}

/* ---------- responsive: the rail becomes a top bar ---------- */

@media (width <= 1000px) {
  .rail {
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 18px 0;
    border-bottom: 1px solid var(--rule);
    background: #fff;
  }
  .rail .nav,
  .rail .nav:first-of-type {
    flex-flow: row wrap;
    gap: 8px 20px;
    margin-top: 0;
  }
  .nav-mark,
  .rail-rule,
  .nav-here {
    display: none;
  }
  .nav a {
    font-size: 14px;
  }
  .brand svg {
    width: 134.4px;
    height: 32px;
  }
  .format-wrap {
    margin-top: 0;
  }
}

@media (width <= 700px) {
  .nav-doors a[data-external] {
    display: none;
  }
}

/* 30px tall is the floor for the normal artwork; anything smaller needs the small version */
@media (width <= 600px) {
  .brand svg {
    width: 126px;
    height: 30px;
  }
}

@media (width <= 520px) {
  .rail {
    flex-wrap: wrap;
    row-gap: 12px;
    /* 16px keeps the bar's bottom rule out of the 30px icon's 15px safe zone */
    padding-block: 16px;
  }
  .brand {
    order: 0;
  }
  .menu {
    order: 1;
  }
  .format-wrap {
    display: none;
  }
  .nav-doors {
    order: 3;
  }
  .rail .nav-doors {
    flex-basis: 100%;
    gap: 8px 16px;
  }
  html.js .menu {
    display: inline-flex;
  }
  html.js .rail .nav-doors {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 2px 0 10px;
    border-bottom: 1px solid var(--rule);
    background: #fff;
    opacity: 0;
    visibility: hidden;
    translate: 0 -8px;
    transition:
      opacity 0.2s var(--ease-out),
      translate 0.3s var(--ease-out),
      visibility 0s linear 0.3s;
  }
  html.js .rail.is-open .nav-doors {
    opacity: 1;
    visibility: visible;
    translate: 0;
    transition:
      opacity 0.2s var(--ease-out),
      translate 0.42s var(--spring-36),
      visibility 0s;
  }
  html.js .rail .nav-doors a {
    padding: 12px 0;
    font-size: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo-stroke,
  .logo-hover:hover .logo-stroke {
    stroke-dashoffset: 0;
    fill-opacity: 1;
    stroke-opacity: 0;
    animation: none;
  }
  .nav-mark,
  .nav a,
  .nav-here a::before,
  .nav-ruler i,
  .format-switch a,
  .menu-word > span,
  .menu-glyph i {
    transition: none;
  }
  .nav-doors a[data-external]::after,
  .nav-doors a[data-external]:hover::after {
    -webkit-mask-position: 0 calc(-1 * var(--door));
    mask-position: 0 calc(-1 * var(--door));
    transition: none;
  }
  html.js .rail[data-reveal] .nav a {
    opacity: 1;
    translate: 0;
    transition: none;
  }
  html.js .rail[data-reveal].is-visible .rail-rule,
  html.js .rail[data-reveal].is-visible .nav-here::before,
  html.js .rail[data-reveal].is-visible .nav-here a,
  html.js .rail[data-reveal].is-visible .nav-ruler {
    animation: none;
  }
  html.js .rail[data-reveal]:not(.is-visible) .rail-rule,
  html.js .rail[data-reveal]:not(.is-visible) .nav-here::before,
  html.js .rail[data-reveal]:not(.is-visible) .nav-ruler {
    opacity: 1;
  }
  @media (width <= 520px) {
    html.js .rail .nav-doors {
      translate: 0;
      transition:
        opacity 0.12s linear,
        visibility 0s linear 0.12s;
    }
    html.js .rail.is-open .nav-doors {
      translate: 0;
      transition:
        opacity 0.12s linear,
        visibility 0s;
    }
  }
}