/* The "Use it in Claude" nav entry and the harness marks it rides on.
 *
 * Shared by index.html (which is themed by rebrand.css) and /mcp (themed by
 * landing.css). Those two stylesheets name their tokens differently, so every
 * colour here reads the rebrand name first, then the landing name, then a
 * literal. That chain is the reason this is one file instead of a copy per
 * stylesheet, and a copy per stylesheet is how the palette drifted twice.
 */

.useIn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans, inherit);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--ink, var(--text, #14140F));
  border: 1px solid var(--line, var(--border, rgba(20, 20, 20, 0.14)));
  background: var(--surf, var(--surface, #FFFFFF));
  transition: border-color 160ms ease, transform 160ms ease;
}
.useIn:hover { border-color: var(--ink, var(--text, #14140F)); transform: translateY(-1px); }
.useIn:active { transform: translateY(0); }
.useIn:focus-visible {
  outline: 2px solid var(--ink, var(--text, #14140F));
  outline-offset: 3px;
}

/* The mark and the name ride the same track, so they can never disagree about
 * which harness is being named. Fixed width, sized to the widest label, so the
 * nav does not reflow on every step of the roll. */
.useIn .track {
  position: relative;
  display: inline-block;
  /* Sized to the widest label ("ChatGPT") plus the mark and its gap. Wider
     than that and the pill carries visible dead space to the right of the
     shorter names; narrower and the longest one clips mid-roll. */
  width: 6.5em;
  height: 1.45em;
  overflow: hidden;
}
.useIn .track ul {
  list-style: none;
  margin: 0;
  padding: 0;
  animation: harnessRoll 10.5s cubic-bezier(0.72, 0, 0.24, 1) infinite;
}
.useIn .track li {
  height: 1.45em;
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
/* The list repeats its first item last, so the loop closes on the frame it
 * opened on and there is no visible snap back to the top. */
@keyframes harnessRoll {
  0%, 28%      { transform: translateY(0); }
  33.3%, 61.3% { transform: translateY(-1.45em); }
  66.6%, 94.6% { transform: translateY(-2.9em); }
  100%         { transform: translateY(-4.35em); }
}

.mark { width: 16px; height: 16px; flex: none; display: block; }

/* The rolling track is decorative to a screen reader: it announces three
 * harness names in sequence with no way to tell they are alternatives. The
 * track carries aria-hidden and this carries the real label. Defined here
 * because neither rebrand.css nor landing.css has a visually-hidden class,
 * so relying on a shared `.sr-only` would have rendered it on the page. */
.useIn .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Host chips on /mcp. Same marks, resting state. */
.host {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--sans, inherit);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--line, var(--border, rgba(20, 20, 20, 0.14)));
  color: var(--sec, var(--text-sec, #66645E));
  background: var(--surf, var(--surface, #FFFFFF));
}
.host .mark { width: 14px; height: 14px; }

@media (prefers-reduced-motion: reduce) {
  /* Hold on the first harness rather than freezing mid-roll between two. */
  .useIn .track ul { animation: none; transform: translateY(0); }
  .useIn { transition: none; }
}

/* The static row on the home page's developer section. Same chips as /mcp. */
.harness-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 0 1.5rem;
}

@media (max-width: 720px) {
  /* Measured, not guessed: at 390px the wordmark ends at 71, this entry runs
   * 118 to 235 and "Get the app" runs 245 to 372, with no document overflow.
   * Both controls fit from 360px up, so the download call to action stays
   * where it has always been and this sits beside it.
   *
   * Only the lead words go. The roll still names each harness in full, which
   * is the part that says what tapping does. */
  .useIn { padding: 7px 12px; gap: 0; }
  .useIn-lead { display: none; }
}

@media (max-width: 340px) {
  /* Below this the two controls reach the wordmark and the bar reads as one
   * crowded run. "Get the app" is the one that has to survive, so this is the
   * one that goes; /mcp is still in the nav on every larger phone, in the
   * developer section, and in the footer. */
  .useIn { display: none; }
}