styles.css

/*
 * Tighten vertical rhythm between top-level sidebar groups. The mint theme
 * separates groups with mt-6/lg:mt-8 (24/32px), sized for always-expanded
 * section lists; our groups are collapsible root-page rows (36px tall), so
 * the stock margin reads as a gap of dead space between every nav item.
 *
 * Only root-linked collapsible groups render as a bare `ul.sidebar-group`
 * directly under #navigation-items. Classic header groups (e.g. the API tab)
 * wrap theirs in a div that carries the margin, so they keep stock spacing.
 */

#navigation-items > ul.sidebar-group {
  margin-top: 12px;
}

.feature-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  margin: 1rem 0;
  font-size: 0.8125rem;
}

.feature-badges:first-child {
  margin-top: 0;
}

#content > .callout:first-child {
  margin-top: 0;
}

.feature-badge-link {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  border: 0;
  border-radius: 9999px;
  text-decoration: none !important;
  background-image: none !important;
}

.feature-badge-link:hover [data-badge] {
  background-color: color-mix(in srgb, var(--color-text) 20%, transparent);
  box-shadow: 0 0 0 1px var(--color-text);
}

.feature-badge-link:active [data-badge] {
  background-color: color-mix(in srgb, var(--color-text) 35%, transparent);
  box-shadow: inset 0 0 0 2px var(--color-text);
  transform: translateY(1px);
}

.feature-badge-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/*
 * Freeze the first column of wide comparison tables (e.g. the roles &
 * permissions matrix on /workspace-admin/roles) so row labels stay
 * visible when readers scroll horizontally to see the right-most columns.
 *
 * Usage: wrap the table in <div className="sticky-first-col">…</div>
 */

.sticky-first-col {
  overflow-x: auto;
  position: relative;
  /* Explicit max width so the wrapper participates in horizontal scroll
     instead of forcing the whole page to scroll. */
  max-width: 100%;
}

.sticky-first-col table {
  /* Force the table to be at least as wide as its natural content so it
     scrolls horizontally inside the wrapper rather than squeezing. */
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

/* Give the first column a comfortable, predictable width so long labels
   like "Manage Organization Warehouse Credentials" have room to sit on
   one or two lines without being clipped. */
.sticky-first-col table th:first-child,
.sticky-first-col table td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 260px;
  max-width: 320px;
  white-space: normal;
  /* Solid, opaque background so the scrolling columns don't show through
     the pinned column. Match the page background in each theme. */
  background-color: #ffffff;
  /* Subtle right-edge divider so the frozen column reads as separated. */
  box-shadow: inset -1px 0 0 0 rgba(0, 0, 0, 0.08);
}

/* Header cells sit above body cells so the top-left corner stays clean. */
.sticky-first-col table thead th:first-child {
  z-index: 2;
}

/* Dark mode — Mintlify toggles a `dark` class on <html>. */
html.dark .sticky-first-col table th:first-child,
html.dark .sticky-first-col table td:first-child {
  background-color: #0b0b0f;
  box-shadow: inset -1px 0 0 0 rgba(255, 255, 255, 0.1);
}

/*
 * The negative glyph in a support matrix. Readers scan these tables for what a
 * role *can* do, so the absences recede and the checks carry the weight. The
 * check is deliberately unstyled — it inherits the page's emphasis colour.
 *
 * Usage: <Icon icon="x" className="matrix-no" />
 *
 * Set per theme rather than through the component's `color` prop: a single
 * light-mode hex would render brighter than the check in dark mode and invert
 * the hierarchy this exists to create.
 *
 * Mintlify paints icons as a mask over a background colour, not as a stroked
 * SVG, so this sets `background-color`; `color` has no effect. The element
 * qualifier outranks the theme's own `bg-primary` utility without !important.
 *
 * Both values sit ~1.4:1 against their own ground, so the glyph recedes by the
 * same amount in either theme, and ~2.5:1 from the check, which is the contrast
 * that actually matters here. Deliberately below the 3:1 guideline for
 * meaningful graphics: every cell in these matrices is populated, so a faint
 * glyph never has to be told apart from an empty cell.
 */

svg.matrix-no {
  background-color: #d9d5f0;
}

html.dark svg.matrix-no {
  background-color: #2e2947;
}

/*
 * Copy-prompt button (snippets/copy-prompt-button.jsx): copies an agent start
 * prompt pointing at start.md. Pill shape and sizing follow the mint theme's
 * primary CTA; the background is the accent purple from docs.json, identical
 * in both themes, so hover/focus colours are hardcoded to match.
 *
 * Two interactions live here: the four agent icons lean toward the cursor on
 * hover (JS drives only the label scramble), and the prompt preview fades in
 * under the button so readers see exactly what a click puts on the clipboard.
 */

.copy-prompt {
  margin: 1.5rem 0;
}

.copy-prompt-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.375rem;
  border: none;
  border-radius: 9999px;
  background-color: #8072ff;
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  transition: background-color 150ms ease;
}

.copy-prompt-btn:hover {
  background-color: #6c5df2;
}

.copy-prompt-btn:focus-visible {
  outline: 2px solid #8072ff;
  outline-offset: 2px;
}

.copy-prompt-label {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.copy-prompt-icons {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
}

.copy-prompt-icons svg {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  transition: transform 300ms ease-out;
}

.copy-prompt-icons svg:nth-child(1) {
  transform: rotate(-6deg);
}

.copy-prompt-icons svg:nth-child(4) {
  transform: rotate(6deg);
}

.copy-prompt-btn:hover .copy-prompt-icons svg:nth-child(1) {
  transform: translateX(-4px) rotate(-12deg);
}

.copy-prompt-btn:hover .copy-prompt-icons svg:nth-child(2) {
  transform: translate(-1px, -1px) rotate(6deg) scale(1.1);
}

.copy-prompt-btn:hover .copy-prompt-icons svg:nth-child(3) {
  transform: translate(1px, 2px) rotate(-6deg) scale(1.1);
}

.copy-prompt-btn:hover .copy-prompt-icons svg:nth-child(4) {
  transform: translateX(4px) rotate(12deg);
}

/* Preview stays in flow (opacity only) so revealing it never shifts layout. */
.copy-prompt-preview {
  margin: 0.625rem 0 0 0.25rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  color: #9ca3af;
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 200ms ease,
    transform 200ms ease;
}

html.dark .copy-prompt-preview {
  color: #6b7280;
}

/* Success state: the preview shifts into the accent family — a darker shade
   on light ground, a purple-tinted near-white on dark — so the copied
   confirmation reads as a state change, not just new words. */
.copy-prompt-preview.is-copied {
  color: #5747cf;
}

html.dark .copy-prompt-preview.is-copied {
  color: #cfc9ff;
}

/* Visible while hovered, while the button holds keyboard focus, or while the
   copied confirmation is up. Plain mouse focus is deliberately excluded
   (:focus-visible, not :focus-within) so the confirmation can fade back out
   after its cooloff even though a click leaves focus on the button. */
.copy-prompt:hover .copy-prompt-preview,
.copy-prompt:has(.copy-prompt-btn:focus-visible) .copy-prompt-preview,
.copy-prompt-preview.is-copied {
  opacity: 1;
  transform: none;
}

.copy-prompt-sr-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .copy-prompt-icons svg,
  .copy-prompt-preview {
    transition: none;
  }

  .copy-prompt-preview {
    transform: none;
  }
}


/* Setup path picker (snippets/setup-path-picker.jsx). Neutral greys carry the
   interface so the vendor logos are the only colour; the brand accent marks
   the route already walked. */
.setup-path {
  --setup-path-line: #e2e2e8;
  --setup-path-surface: #f5f5f7;
  --setup-path-ground: #ffffff;
  --setup-path-ink: #16151d;
  --setup-path-muted: #5d5c69;
  --setup-path-faint: #8b8a97;
  --setup-path-accent: #8072ff;
  display: grid;
  gap: 1rem;
  justify-items: start;
  margin: 1.5rem 0;
  color: var(--setup-path-ink);
  font-size: 1rem;
  line-height: 1.55;
}

html.dark .setup-path {
  --setup-path-line: #2d2d38;
  --setup-path-surface: #1b1b22;
  --setup-path-ground: #0f0f14;
  --setup-path-ink: #efeff3;
  --setup-path-muted: #a5a5b2;
  --setup-path-faint: #777784;
}

.setup-path p {
  margin: 0;
}

.setup-path ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.setup-path svg {
  display: block;
  flex: none;
}

.setup-path button {
  font-family: inherit;
  color: inherit;
  cursor: pointer;
}

.setup-path-trunk {
  display: grid;
  width: 100%;
}

.setup-path-trunk > li {
  position: relative;
  display: grid;
  grid-template-columns: 2.375rem minmax(0, 1fr);
  gap: 1rem;
  padding: 0 0 1.5rem;
  margin: 0;
}

.setup-path-trunk > li::before {
  content: "";
  position: absolute;
  left: calc(1.1875rem - 1px);
  top: 2.375rem;
  bottom: 0;
  width: 2px;
  background: var(--setup-path-line);
}

.setup-path-trunk > li.is-done::before {
  background: var(--setup-path-accent);
}

.setup-path-trunk > li.is-last {
  padding-bottom: 0;
}

.setup-path-trunk > li.is-last::before {
  display: none;
}

.setup-path-tile {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.375rem;
  height: 2.375rem;
  flex: none;
  border-radius: 0.625rem;
  background: var(--setup-path-surface);
  transition: transform 180ms ease;
}

.setup-path-tile.is-dark {
  background: #16151d;
}

.setup-path-trunk > li.is-current > .setup-path-tile {
  background: var(--setup-path-ink);
  color: var(--setup-path-ground);
}

.setup-path-trunk > li.is-pending > .setup-path-tile {
  background: transparent;
  border: 2px dashed var(--setup-path-line);
  color: var(--setup-path-faint);
}

.setup-path-node {
  display: grid;
  gap: 0.75rem;
  min-width: 0;
}

.setup-path-question {
  display: flex;
  align-items: center;
  min-height: 2.375rem;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
}

.setup-path-answer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.375rem;
}

.setup-path-answer p {
  display: grid;
  min-width: 0;
  line-height: 1.3;
}

.setup-path-answer p span {
  font-size: 0.8125rem;
  color: var(--setup-path-muted);
}

.setup-path-answer p strong {
  font-weight: 600;
}

.setup-path-change {
  flex: none;
  padding: 0.25rem 0.625rem;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  background: none;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--setup-path-muted) !important;
}

.setup-path-change:hover {
  border-color: var(--setup-path-line);
  color: var(--setup-path-ink) !important;
}

.setup-path-leaves {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: -0.25rem;
}

.setup-path-leaves a {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.1875rem 0.625rem;
  border-radius: 0.5rem;
  background: var(--setup-path-surface);
  font-size: 0.8125rem;
  color: inherit;
  text-decoration: none;
}

.setup-path-leaves a:hover {
  text-decoration: underline;
}

.setup-path-leaves svg,
.setup-path-chevron {
  color: var(--setup-path-faint);
}

.setup-path-note {
  font-size: 0.8125rem;
  color: var(--setup-path-muted);
}

.setup-path-note a,
.setup-path-step-body a {
  color: var(--setup-path-ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.setup-path-pending {
  display: flex;
  align-items: center;
  min-height: 2.375rem;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--setup-path-muted);
}

.setup-path-options {
  display: grid;
  grid-template-columns: repeat(var(--setup-path-columns), minmax(0, 1fr));
  gap: 0.625rem;
}

.setup-path-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--setup-path-line);
  border-radius: 0.75rem;
  background: var(--setup-path-ground);
  text-align: left;
  transition:
    border-color 150ms ease,
    background 150ms ease;
}

.setup-path-option:hover {
  border-color: var(--setup-path-faint);
}

.setup-path-option:hover .setup-path-tile {
  transform: scale(1.06);
}

.setup-path-option:focus-visible,
.setup-path-change:focus-visible,
.setup-path-ghost:focus-visible,
.setup-path-phase li > button:focus-visible {
  outline: 2px solid var(--setup-path-accent);
  outline-offset: 2px;
}

.setup-path-option[aria-checked="true"] {
  border-color: var(--setup-path-ink);
  background: var(--setup-path-surface);
}

.setup-path-option[aria-checked="true"] .setup-path-tile:not(.is-dark) {
  background: var(--setup-path-ground);
}

.setup-path-option-text {
  display: grid;
  flex: 1;
  gap: 1px;
  min-width: 0;
}

.setup-path-option-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.1875rem 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
}

.setup-path-option-hint {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--setup-path-muted);
}

.setup-path-tag {
  padding: 1px 0.4375rem;
  border: 1px solid var(--setup-path-line);
  border-radius: 99px;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--setup-path-muted);
  white-space: nowrap;
}

.setup-path-radio {
  display: grid;
  place-items: center;
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
  border: 1.5px solid var(--setup-path-line);
  border-radius: 50%;
  color: transparent;
  transition:
    background 150ms ease,
    border-color 150ms ease;
}

.setup-path-option[aria-checked="true"] .setup-path-radio {
  border-color: var(--setup-path-ink);
  background: var(--setup-path-ink);
  color: var(--setup-path-ground);
}

.setup-path-options.is-compact .setup-path-option {
  padding: 0.5625rem 0.75rem;
}

.setup-path-options.is-compact .setup-path-radio {
  display: none;
}

.setup-path-options.is-compact .setup-path-option-title {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.setup-path-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--setup-path-line);
  border-radius: 0.5rem;
  background: none;
  font-size: 0.875rem;
  font-weight: 500;
}

.setup-path-ghost:hover {
  border-color: var(--setup-path-ink);
}

.setup-path-result {
  display: grid;
  gap: 1rem;
  min-width: 0;
}

.setup-path-result-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  min-height: 2.375rem;
}

.setup-path-result-title {
  font-size: 1.125rem;
  font-weight: 600;
}

.setup-path-result-title span {
  margin-left: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--setup-path-muted);
}

.setup-path-phases {
  display: grid;
  border-top: 1px solid var(--setup-path-line);
}

.setup-path-phase {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: 0 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--setup-path-line);
}

.setup-path-phase-name {
  display: flex;
  align-items: center;
  align-self: start;
  gap: 0.5rem;
  padding: 0.4375rem 0;
  font-size: 0.9375rem;
  font-weight: 600;
}

.setup-path-phase-name svg {
  color: var(--setup-path-muted);
}

.setup-path-phase li {
  margin: 0;
  padding: 0;
}

.setup-path-phase li > button {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-width: 0;
  padding: 0.4375rem 0.5rem;
  border: 0;
  border-radius: 0.5rem;
  background: none;
  text-align: left;
}

.setup-path-phase li > button:hover {
  background: var(--setup-path-surface);
}

.setup-path-step-number {
  width: 1.25rem;
  flex: none;
  font-size: 0.8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--setup-path-faint);
}

.setup-path-step-title {
  flex: 1;
  min-width: 0;
  font-size: 0.9375rem;
  font-weight: 500;
}

.setup-path-chevron {
  transition: transform 150ms ease;
}

.setup-path-phase li.is-open .setup-path-chevron {
  transform: rotate(90deg);
}

.setup-path-step-body {
  display: grid;
  gap: 0.375rem;
  justify-items: start;
  padding: 0 0.5rem 0.625rem 2.5rem;
  font-size: 0.875rem;
  color: var(--setup-path-muted);
}

.setup-path-step-body a {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
}

.setup-path-step-body > span {
  font-size: 0.8125rem;
  color: var(--setup-path-faint);
}

@media (max-width: 640px) {
  .setup-path-options {
    grid-template-columns: 1fr;
  }

  .setup-path-options.is-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .setup-path-phase {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .setup-path-tile,
  .setup-path-option,
  .setup-path-radio,
  .setup-path-chevron {
    transition: none;
  }
}