/* /setups — loaded after /app-page.css, which supplies the shell, .tag,
 * .note, .steps and .closer. The .dock/.inst strip mirrors the one in
 * site/use-cases.html's inline styles (that page is hand-written and
 * self-contained); keep the two looking the same. */

.setup__jump { margin-bottom: var(--space-xl); }
.setup__jump ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.setup__jump a {
  display: inline-flex; align-items: center; min-height: 32px;
  font-size: var(--text-sm); color: var(--color-ink-2);
  border: 1px solid var(--color-rule); border-radius: 999px;
  padding: var(--space-3xs) var(--space-sm);
}
.setup__jump a:hover { color: var(--color-ink); border-color: var(--color-rule-2); text-decoration: none; }

.setup { border-top: 1px solid var(--color-rule); padding-top: var(--space-lg); margin-top: var(--space-xl); scroll-margin-top: 76px; }
.setup h2 { margin: 0 0 var(--space-2xs); }
.setup__who { font-size: var(--text-md); color: var(--color-ink-2); margin-bottom: var(--space-md); }

/* the Dock strip — what this setup's Dock ends up looking like */
.dock {
  display: flex; align-items: flex-start; gap: var(--space-md); flex-wrap: wrap;
  padding: var(--space-md); margin-bottom: var(--space-md);
  background: var(--color-paper-2); border: 1px solid var(--color-rule);
  border-radius: var(--radius-card);
}
.inst { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 92px; }
.inst i {
  position: relative; width: 34px; height: 34px; border-radius: 8px;
  background: var(--tint, var(--color-rule-2));
}
.inst i::after {
  content: ""; position: absolute; right: -2px; bottom: -2px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--color-accent); border: 2px solid var(--color-paper-2);
}
.inst span {
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted);
  text-align: center; line-height: 1.3; overflow-wrap: break-word;
}

.setup__list { list-style: none; border-top: 1px solid var(--color-rule); margin-bottom: var(--space-md); }
.setup__list li {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm);
  flex-wrap: wrap; border-bottom: 1px solid var(--color-rule);
  padding: var(--space-xs) 0; font-size: var(--text-sm);
}

@media (max-width: 40rem) {
  .inst { width: 76px; }
  .dock { gap: var(--space-sm); padding: var(--space-sm); }
}

.setup__fine {
  font-size: var(--text-sm); color: var(--color-muted);
  border-top: 1px solid var(--color-rule); padding-top: var(--space-md); margin-top: var(--space-xl);
}