/* ══════════════════════════════════════════════════════════════════════════
   THE MANTRA RAIL — one way-finder, shared by every mantra surface.
   Loaded by mantra-arise.html · mantra-new.html · mantra.html

   WHY IT EXISTS
   Each surface carried its own two-link bar — "← Arise" and "MotusMoves" — so
   from a single mantra you could go back, and from Arise you could go home, but
   you could never simply MOVE BETWEEN the rooms. Writing one meant knowing the
   URL. The rail names the rooms and lets you step between them.

   WHY ONLY TWO DESTINATIONS
   `/mantra/arise` and `/mantra/new` are the only mantra surfaces that answer
   without a slug — a single mantra lives at /mover/:slug/mantra/:url. So the
   rail offers exactly what exists. A third tab pointing at a page that needs an
   id you may not have is a broken promise wearing a nav's clothes; on a single
   mantra the rail shows a QUIET MARKER of where you are instead of a link.

   THE FORM
   A mantra is the fewest words that still say everything, so the rail is the
   fewest controls that still say where you can go: one way home, two rooms, and
   a lit one telling you which you are standing in. Glass, no chrome, and the
   only lit thing is your own position.
   ══════════════════════════════════════════════════════════════════════════ */

.mrail{
  position:relative; z-index:5;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px clamp(14px,4vw,30px);
  font-family:'Sora', system-ui, sans-serif;
}

/* the way home — deliberately the quietest thing here */
.mrail__home{
  display:inline-flex; align-items:center; gap:7px;
  min-height:44px; padding:0 4px;
  color:#cfe6ff; font-size:.82rem; font-weight:500; letter-spacing:.01em;
  text-decoration:none; white-space:nowrap;
  transition:color .2s ease;
}
.mrail__home:hover{ color:#fff; }
.mrail__home span{ color:#3df2ff; }

/* the two rooms, in one glass housing */
.mrail__seg{
  display:inline-flex; align-items:center; gap:4px;
  padding:4px; border-radius:999px;
  border:1px solid rgba(148,180,255,.18);
  background:rgba(10,14,38,.55);
  -webkit-backdrop-filter:blur(12px) saturate(170%);
  backdrop-filter:blur(12px) saturate(170%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.mrail__t{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:38px; padding:0 15px; border-radius:999px;
  color:#bcd6ff; font-size:.83rem; font-weight:600; letter-spacing:.01em;
  text-decoration:none; white-space:nowrap;
  transition:color .2s ease, background .2s ease;
}
.mrail__t:hover{ color:#fff; background:rgba(255,255,255,.05); }

/* the one you are standing in — lit from within, never a highlighter slab */
.mrail__t.is-on{
  color:#eafcff;
  background:linear-gradient(180deg, rgba(61,242,255,.16), rgba(61,242,255,.05));
  box-shadow:inset 0 0 0 1px rgba(61,242,255,.34), 0 0 22px -8px rgba(61,242,255,.85);
}
.mrail__t.is-on::before{
  content:""; width:5px; height:5px; margin-right:8px; border-radius:50%;
  background:#3df2ff; box-shadow:0 0 9px #3df2ff;
}

/* on a single mantra: a marker, not a link — you are already here */
.mrail__here{
  display:inline-flex; align-items:center; gap:7px;
  min-height:38px; padding:0 15px; border-radius:999px;
  color:#cfe6ff; font-size:.8rem; font-weight:600; white-space:nowrap;
  border:1px dashed rgba(148,180,255,.26); background:rgba(10,14,38,.4);
}
.mrail__here::before{
  content:""; width:5px; height:5px; border-radius:50%;
  background:#b15cff; box-shadow:0 0 9px #b15cff;
}

/* THE PHONE.
   ⚠ Measured at 375 on Arise: hiding the home WORD here left a bare arrow
   19px wide — a 44px-tall target you cannot actually hit. It was also
   unnecessary: the tabs ended at 358 and the home link sat at 12–31, with
   163px of clear air between them. The word stays; only the truly narrow
   phones give it up, and even then the target keeps its 44px box. */
@media (max-width:520px){
  .mrail{ padding:11px 12px; gap:8px; }
  .mrail__home{ font-size:.78rem; min-width:44px; }
  .mrail__t{ min-height:44px; padding:0 13px; font-size:.79rem; }   /* the pill IS the target — the housing's padding is not tappable */
  .mrail__here{ min-height:44px; padding:0 12px; font-size:.76rem; }
}
/* only now, where the row genuinely runs out of room, does the word go —
   and the arrow keeps a full box so it stays hittable. */
@media (max-width:360px){
  .mrail__home b{ display:none; }
  .mrail__home{ justify-content:center; }
  .mrail__t{ padding:0 11px; font-size:.75rem; }
}
/* ⚠ That 375px measurement was taken on ARISE, whose row carries two tabs and
   really does leave the word 163px of clear air. THE SINGLE-MANTRA ROW IS NOT
   THAT ROW: it also carries the "This mantra" marker, so its housing is 279.8px
   against 334px of usable width at 390 — the word has no air at all. Swept
   1px at a time: it only fits whole from 449px up; from 361–448 it is shaved
   mid-word to "Motus", and below 441 its tail is painted under the glass pill.
   So on the row that carries the marker the word gives up its place at the
   width THIS row actually runs out — the rule above, at the honest threshold.
   The arrow keeps its 44px box (min-width, set at ≤520) and its centering.
   It gives up the SPACE, not the NAME: the arrow beside it is aria-hidden, so
   `display:none` here would leave the link with no accessible name at all on
   every phone. Held out of flow and out of sight instead, and it still reads
   as "MotusMoves" to a screen reader. */
@media (max-width:448px){
  .mrail:has(.mrail__here) .mrail__home b{
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip-path:inset(50%); white-space:nowrap;
  }
  .mrail:has(.mrail__here) .mrail__home{ justify-content:center; }
}

@media (prefers-reduced-motion: reduce){
  .mrail__home, .mrail__t{ transition:none; }
}