/* ── tokens the rail reads. Ported from the site's :root, re-pointed for the
      AI half: this page's ground is ink and its accent is the green. ────── */
/* tokens now come from vdc-chrome.css (the real VDC values) so the rail
   matches the lifted nav and footer exactly */

/* The accent on the AI page is a LIGHT green, so there the lit label must go
   dark. SCOPED to that page: on the VDC pages the thumb is dark ink, and this
   same rule unscoped made the active label #181818 on a near-black pill —
   invisible. The default (line ~53) is white-on-thumb, which is what VDC needs. */
.nq-aip #nqRail a.on,.nq-aip #nqRail a.is-lit{color:#181818!important;}
.nq-aip #nqRail a.is-lit .nq-tg__d{color:rgba(24,24,24,.72)!important;}

/* ══ THE VDC ⇄ AI RAIL ═══════════════════════════════════════════════════════
   A real segmented toggle that starts at the top and MIGRATES to a translucent
   stick on the right once the reader crosses the second section.

   ⚠️ POSITION IS SET IN PIXELS BY JS, NEVER IN CSS.
   v7 docked with `transform:translate(calc(50vw - 100% - 20px), …)`. That
   `100%` resolves against the rail's OWN width — which is reflowing 298px→110px
   during the very same transition, so the target kept moving while the element
   flew at it. That was the glitch. Now JS measures both rects and FLIPs between
   them: the only animated property is a transform between two fixed pixel
   values, and the size change is hidden under a brief dip. ────────────────── */
#nqRail{
  position:fixed; z-index:1200; left:0; top:0;
  display:flex; align-items:stretch; gap:4px; padding:4px;
  border-radius:var(--nq-r-pill);
  background:rgba(255,255,255,.58);
  backdrop-filter:blur(18px) saturate(1.5); -webkit-backdrop-filter:blur(18px) saturate(1.5);
  box-shadow:inset 0 0 0 1px rgba(9,15,29,.09), 0 8px 30px -12px rgba(9,15,29,.42);
  transition:opacity .28s ease, filter .28s ease,
             background .45s ease, padding .45s ease, border-radius .45s ease,
             box-shadow .45s ease, gap .45s ease;
  will-change:transform;}
#nqRail.is-flying{opacity:.55; filter:blur(.4px);}
#nqRail::before{
  content:""; position:absolute; z-index:0; top:0; left:0;   /* JS supplies the
     FULL offset in --tgx/--tgy, so the thumb must start at the rail's origin —
     any padding inset here would be added on top of it and double up */
  width:var(--tgw,50%); height:var(--tgh,calc(100% - 8px));
  border-radius:var(--nq-r-pill); background:var(--nq-ink);
  box-shadow:0 1px 2px rgba(9,15,29,.2), 0 8px 20px -10px rgba(9,15,29,.7);
  transform:translate(var(--tgx,0px),var(--tgy,0px));
  transition:transform .42s cubic-bezier(.34,1.25,.5,1), width .3s ease, height .3s ease;}
#nqRail.is-flying::before{transition:none;}
#nqRail a{
  position:relative; z-index:1; display:flex; align-items:center; gap:8px;
  padding:8px 17px; border-radius:var(--nq-r-pill);
  font-family:var(--nq-sans); font-weight:600; font-size:.875rem; line-height:1;
  letter-spacing:-.005em; white-space:nowrap; text-decoration:none;
  color:var(--nq-muted); transition:color .3s ease, transform .18s ease;}
/* ⚠️ the LIT half is whichever the thumb is under — which is the hovered one
   while the cursor is in the rail, not necessarily the page you are on. Keyed
   off .is-lit (written by JS), never off .on, or the label the thumb has just
   slid beneath stays grey and the one it left stays white. */
#nqRail a.is-lit{color:#fff;}
#nqRail a:not(.is-lit):hover{color:var(--nq-ink);}
#nqRail a:active{transform:scale(.97);}
#nqRail .nq-tg__s,#nqRail .nq-tg__d,#nqRail .nq-tg__hd,#nqRail .nq-tg__cap{display:none;}
#nqRail a:not(.on) .nq-tg__dot{
  width:6px;height:6px;border-radius:50%;background:var(--nq-accent);flex:none;
  animation:nqDot 3.4s ease-in-out infinite;}
#nqRail a.on .nq-tg__dot,#nqRail a.is-lit .nq-tg__dot{display:none;}
@keyframes nqDot{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}

/* ── DOCKED · v7's 67px stick read as decoration. It now carries a SWITCH cap
   and full-width tiles, so it says what it is without shouting. ──────────── */
/* ⚠️ ANCHORED RIGHT AND CENTRE, NOT BY left/top.
   The hover glitch: JS pinned `left` in px, so when the panel grew 116px→252px
   it expanded RIGHTWARD past the viewport edge and only snapped back at
   transitionend. Anchoring the far edges means growth is naturally leftward and
   symmetric, and nothing needs repositioning while it opens. */
#nqRail.is-docked{
  left:auto!important; right:20px; top:50%!important; transform:translateY(-50%);
  flex-direction:column; gap:3px; padding:7px 6px 6px; border-radius:17px;
  transition:opacity .28s ease, filter .28s ease, background .34s ease,
             padding .34s cubic-bezier(.22,.61,.36,1), border-radius .34s ease,
             box-shadow .34s ease, gap .34s ease;
  background:rgba(255,255,255,.62);
  box-shadow:inset 0 0 0 1px rgba(9,15,29,.09), 0 16px 46px -16px rgba(9,15,29,.5);}
#nqRail.is-docked::before{border-radius:13px;}   /* size comes from --tgw/--tgh */
#nqRail.is-docked .nq-tg__cap{
  display:block; padding:1px 8px 6px; font-family:var(--nq-sans); font-size:.545rem;
  font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--nq-muted); opacity:.72; text-align:center;}
#nqRail.is-docked a{
  justify-content:space-between; padding:11px 13px; border-radius:13px;
  font-size:.855rem; min-width:104px;}
#nqRail.is-docked .nq-tg__k{display:none;}
#nqRail.is-docked .nq-tg__s{display:inline;}
#nqRail.is-docked:hover,#nqRail.is-docked:focus-within{
  background:rgba(255,255,255,.85); padding:13px;
  box-shadow:inset 0 0 0 1px rgba(9,15,29,.1), 0 26px 64px -18px rgba(9,15,29,.55);}
#nqRail.is-docked:hover .nq-tg__cap,#nqRail.is-docked:focus-within .nq-tg__cap{display:none;}
#nqRail.is-docked:hover .nq-tg__hd,#nqRail.is-docked:focus-within .nq-tg__hd{
  display:block; padding:2px 4px 9px; font-family:var(--nq-sans); font-size:.645rem;
  font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--nq-muted);}
#nqRail.is-docked:hover a,#nqRail.is-docked:focus-within a{
  flex-direction:column; align-items:flex-start; gap:4px; padding:11px 13px; width:224px;}
#nqRail.is-docked:hover .nq-tg__k,#nqRail.is-docked:focus-within .nq-tg__k{
  display:inline; font-size:.9rem;}
#nqRail.is-docked:hover .nq-tg__s,#nqRail.is-docked:focus-within .nq-tg__s{display:none;}
#nqRail.is-docked:hover .nq-tg__d,#nqRail.is-docked:focus-within .nq-tg__d{
  display:block; font-weight:450; font-size:.735rem; line-height:1.35;
  letter-spacing:0; white-space:normal; color:var(--nq-muted); opacity:.92;}
#nqRail.is-docked:hover a.is-lit .nq-tg__d,#nqRail.is-docked:focus-within a.is-lit .nq-tg__d{
  color:rgba(255,255,255,.82);}
#nqRail.is-docked:hover .nq-tg__dot,#nqRail.is-docked:focus-within .nq-tg__dot{
  position:absolute; right:12px; top:14px;}

.nq-aip #nqRail,#nqRail.on-dark{
  background:rgba(9,15,29,.5);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.15), 0 16px 46px -16px rgba(0,0,0,.6);}
.nq-aip #nqRail::before,#nqRail.on-dark::before{background:#fff;}
.nq-aip #nqRail a,#nqRail.on-dark a{color:rgba(246,248,252,.66);}
.nq-aip #nqRail a.is-lit,#nqRail.on-dark a.is-lit{color:var(--nq-ink);}
.nq-aip #nqRail a:not(.is-lit):hover,#nqRail.on-dark a:not(.is-lit):hover{color:#fff;}
.nq-aip #nqRail .nq-tg__cap,#nqRail.on-dark .nq-tg__cap{color:rgba(246,248,252,.6);}
.nq-aip #nqRail.is-docked:hover,#nqRail.on-dark.is-docked:hover{background:rgba(9,15,29,.78);}
.nq-aip #nqRail a.is-lit .nq-tg__d,#nqRail.on-dark a.is-lit .nq-tg__d{color:rgba(9,15,29,.74)!important;}

/* the strip the rail launches from. On the VDC site this is a real bar; here the
   JS lifts the toggle onto <body>, so what is left must still hold its height
   (place() measures it to centre the rail) and carry the ink ground. */
.nq-brandbar--ink{background:rgba(9,15,29,.42);border-bottom:1px solid rgba(255,255,255,.09);}
.nq .nq-brandbar,.nq-brandbar{
  display:flex; justify-content:center; align-items:center;
  min-height:74px; overflow:hidden;          /* 52px sat cramped around the pill */
  transition:min-height .55s cubic-bezier(.62,.03,.2,1), padding-block .55s cubic-bezier(.62,.03,.2,1),
             opacity .35s ease, border-color .35s ease;}
.nq .nq-brandbar.is-gone,.nq-brandbar.is-gone{
  min-height:0!important; padding-block:0!important; opacity:0;
  border-bottom-color:transparent!important;}
body.nq-docked{--nq-navh:68px;}

@media (max-width:820px){
  #nqRail.is-docked{right:12px;}
  #nqRail.is-docked:hover a,#nqRail.is-docked:focus-within a{width:190px;} }
@media (prefers-reduced-motion:reduce){
  #nqRail,#nqRail::before,.nq-brandbar{transition:none!important;}
  #nqRail a:not(.on) .nq-tg__dot{animation:none!important;} }