/* THE CLIENT RAIL — the logo strip that answers "does it work with what I already use?".
   The markup is GENERATED by scripts/connect-library.mjs from the same console library that
   renders /docs/, so this file styles a list it does not own and must not assume a length.

   QUIET ON PURPOSE. The first cut of this rail was a row of bordered chips with a macOS-dock
   zoom driven from a script. Recut 2026-09-06 after the homepage's four router cards came
   out and the rail moved up to sit directly under the hero: in that position the row is the
   first thing after the claim, and a row of pills that swell as they pass was a second hero
   competing with the first. What replaced it is the shape a logo wall takes when it is not
   trying to be noticed -- one line, marks and names in the page's secondary ink, no borders,
   a constant linear crawl, and a mark that comes up to full colour only under the pointer.
   The dock zoom and the script that drove it are gone with the chips; a CSS animation is the
   whole engine now, so the rail runs identically with scripts blocked.

   IT RUNS ON TWO PALETTES. Sub-pages load app.css (--txt/--dim2/--faint); the homepage loads
   home.css alone, which names the same roles --ink/--muted/--faint and does not define the
   others at all. Every colour below is therefore a fallback chain, app.css name first, and
   the last link is a literal so a third page with neither still renders a finished rail. */
.mqs{
  --mqs-txt:var(--txt, var(--ink, currentColor));
  --mqs-dim:var(--dim2, var(--muted, #6B6860));
  --mqs-faint:var(--faint, #736F66);
  position:relative;z-index:1;
  padding:38px 0 12px;text-align:center;
}
/* The label is the site's own eyebrow: 11px, 600, .13em caps in --faint -- the same setting as
   the footer column heads and the /docs/ door labels, so it reads as furniture and not as a
   heading. It says what the row IS; the row says which. */
.mqs-kicker{
  margin:0 auto 20px;padding:0 24px;
  font-family:var(--sans, inherit);font-size:calc((11px) * var(--ts, 1));font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--mqs-faint);
}
/* The one sentence the marks cannot say: how many have a paste-in recipe (the number is
   rendered from the library, never typed) and that the list is not a whitelist. Same size and
   ink as the hero's fine print, so it sits under the rail rather than captioning it. */
.mqs-more{
  margin:18px auto 0;padding:0 24px;
  font-size:calc((13px) * var(--ts, 1));line-height:1.5;color:var(--mqs-faint);
}
.mqs-more a{color:inherit;text-decoration:none;border-bottom:1px solid currentColor}
.mqs-more a:hover{color:var(--mint)}
.mqs-more a:focus-visible{outline:2px solid var(--mint);outline-offset:3px;border-radius:3px}

/* THE RAIL. overflow:hidden is what makes the second copy of the track invisible until it
   scrolls in; the mask fades both ends so marks enter and leave instead of being chopped. 12%
   a side, wider than the old 7%: with nothing drawn around a mark, a hard edge on the name is
   the only edge there is, and it shows. */
.mqs-rail{
  position:relative;overflow:hidden;padding:2px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
/* TWO IDENTICAL TRACKS, MOVED AS ONE. The pair is exactly twice one track's width, so
   translating the mover by -50% lands the second copy precisely where the first began and the
   loop has no seam. The track's side padding is half its gap for the same reason: the join
   between copy one's last mark and copy two's first is then one ordinary gap.
   2.4s per mark, linear, as a duration and not a speed so a longer library crawls at the same
   pace rather than in the same time. Measured at ~70px/s for the current 21; the reference
   this recut follows runs its wall at about 80. */
.mqs-move{
  display:flex;width:max-content;
  animation:mqs-run calc(var(--mqs-n, 20) * 2.4s) linear infinite;
}
@keyframes mqs-run{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
/* Reading one is a reason to stop the rail; so is tabbing into it. The marks are links. */
.mqs-rail:hover .mqs-move,
.mqs-rail:focus-within .mqs-move{animation-play-state:paused}

.mqs-track{display:flex;align-items:center;gap:48px;margin:0;padding:0 24px;list-style:none}
.mqs-item{flex:none}
/* A mark is its glyph and its name in the secondary ink, nothing drawn around them. The
   whole thing is one link to the client's recipe on /docs/; hover lifts the name to full ink
   and lets the glyph's own colour through, which is also the only cue that it is a link, and
   enough: a row of vendor names is understood to lead somewhere. */
.mqs-mark{
  display:inline-flex;align-items:center;gap:10px;min-height:28px;
  color:var(--mqs-dim);text-decoration:none;white-space:nowrap;
  font-size:calc((15px) * var(--ts, 1));line-height:1;font-weight:500;letter-spacing:-.005em;
  transition:color .18s ease;
}
.mqs-mark:hover,.mqs-mark:focus-visible{color:var(--mqs-txt)}
.mqs-mark:focus-visible{outline:2px solid var(--mint);outline-offset:4px;border-radius:4px}
.mqs-glyph{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;flex:none}
/* The marks arrive in their own brand colours (simple-icons ships the hex). Twenty of those in
   a row is a paint chart, and the reference wall is monochrome for exactly that reason; so at
   rest every mark is desaturated and knocked back to roughly the ink around it, and the colour
   is kept for the hover. Opacity rather than a fill swap because these are <img>s, not inline
   paths, and it is the one treatment that lands the same on a black mark and a coloured one. */
.mqs-img{
  display:block;width:20px;height:20px;
  filter:grayscale(1);opacity:.62;
  transition:filter .18s ease, opacity .18s ease;
}
.mqs-mark:hover .mqs-img,.mqs-mark:focus-visible .mqs-img{filter:none;opacity:1}
/* Mirrors connect.css: only the night theme swaps to the reversed mark. */
.mqs-img-dark{display:none}
[data-theme="night"] .mqs-img-light{display:none}
[data-theme="night"] .mqs-img-dark{display:block}
.mqs-name{display:inline-block}

/* MOTION: the rail keeps running under every motion setting (user ruling 2026-09-25): the
   site's motion control quiets the decorative field, not the list of clients. Hover and
   keyboard focus pause it (above), which is the pause WCAG 2.2.2 asks of content that moves
   for more than five seconds. */

@media(max-width:820px){
  .mqs{padding:30px 0 8px}
  .mqs-kicker{margin-bottom:16px}
  .mqs-track{gap:34px;padding:0 17px}
  .mqs-mark{font-size:calc((14px) * var(--ts, 1))}
  .mqs-more{margin-top:14px}
}