/* Mobile route dock — the three routes as orbs in a pill fixed to the bottom of
   the screen. Below 820px the inner pages have no navigation at all (their nav
   is hidden there), and the launcher's selector scrolls out of reach as soon as
   a route box opens; this is the same wheel the multiclass hero used, ported to
   the route-* system so every page can share one component.

   Each route carries its own colour, so the dock reads the same on every page
   regardless of the accent the host page happens to be tinted with. */

.route-dock {
  --dock-sepia: 216, 163, 111;
  --dock-marcos: 145, 183, 255;
  --dock-foxi: 255, 90, 53;
  position: fixed;
  z-index: 200;
  bottom: max(0.85rem, env(safe-area-inset-bottom, 0px));
  left: 50%;
  display: none;
  gap: 0.15rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015)),
    rgba(2, 3, 8, 0.88);
  box-shadow:
    0 1rem 2.4rem rgba(0, 0, 0, 0.56),
    0 0 1.6rem rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  transform: translateX(-50%);
}

.route-dock__item {
  display: grid;
  justify-items: center;
  gap: 0.3rem;
  width: 4.6rem;
  padding: 0.5rem 0.2rem 0.45rem;
  border: 0;
  border-radius: 999px;
  color: inherit;
  font: inherit;
  text-decoration: none;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.route-dock__orb {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.15rem;
  aspect-ratio: 1;
  border: 1px solid rgba(var(--dock-rgb), 0.34);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, rgba(var(--dock-rgb), 0.22), rgba(2, 3, 8, 0.9) 72%);
  transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.route-dock__orb img,
.route-dock__orb svg {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
}

.route-dock__orb svg {
  fill: none;
  stroke: rgb(var(--dock-rgb));
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.route-dock__label {
  font: 500 0.54rem/1 "DM Mono", ui-monospace, monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  transition: color 220ms ease;
}

.route-dock__item--sepia { --dock-rgb: var(--dock-sepia); }
.route-dock__item--marcos { --dock-rgb: var(--dock-marcos); }
.route-dock__item--foxi { --dock-rgb: var(--dock-foxi); }

/* Where you are, or where you are about to go. */
.route-dock__item[aria-current="page"] .route-dock__orb,
.route-dock__item.is-active .route-dock__orb,
.route-dock__item:focus-visible .route-dock__orb {
  border-color: rgb(var(--dock-rgb));
  box-shadow: 0 0 0 3px rgba(var(--dock-rgb), 0.16), 0 0 1.4rem rgba(var(--dock-rgb), 0.4);
  transform: translateY(-2px);
}

.route-dock__item[aria-current="page"] .route-dock__label,
.route-dock__item.is-active .route-dock__label {
  color: rgb(var(--dock-rgb));
}

.route-dock__item:focus-visible {
  outline: 2px solid rgb(var(--dock-rgb));
  outline-offset: 2px;
}

/* The launcher's own orbs already carry the emblem art; on the dock the sepia
   and marcos renders need the same lift they get there to read at this size. */
.route-dock__item--sepia .route-dock__orb img { transform: scale(1.18); }
.route-dock__item--marcos .route-dock__orb img { transform: scale(1.24) translateY(1px); }

@media (max-width: 820px) {
  .route-dock {
    display: flex;
  }

  /* Nothing at the end of the page should sit under the pill. Qualified with
     body so it outranks each page own footer padding whatever the load order
     of the stylesheets happens to be. */
  body .site-footer {
    padding-bottom: 6.5rem;
  }

  /* Panels that open under the row you touched get scrolled into view by
     script; this keeps that landing above the pill instead of behind it. */
  .route-list > .route-preview,
  .experiment-list > .experiment-preview {
    scroll-margin-bottom: 7rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .route-dock__orb {
    transition: none;
  }

  .route-dock__item[aria-current="page"] .route-dock__orb,
  .route-dock__item.is-active .route-dock__orb {
    transform: none;
  }
}