/* Connect page styles, scoped under .page-connect: the endpoint, the transport facts, the live
   tool list, the copyable snippets and the key's limits. */

.page-connect .connect-wrap { display: grid; gap: 1.25rem; max-width: 60rem; }
.page-connect .connect-wrap > .page-header { margin-bottom: 0; }
.page-connect .connect-card { padding-block: 1.25rem; gap: 1rem; }
.page-connect .card-title { font-size: var(--text-base); }

/* endpoint and transport facts */
.page-connect .connect-endpoint-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  padding: 0.625rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: color-mix(in oklab, var(--muted) 45%, transparent);
}
.page-connect .connect-endpoint {
  flex: 1 1 14rem; min-width: 0; font-size: var(--text-sm); overflow-wrap: anywhere;
}
.page-connect .connect-facts { display: grid; gap: 0.5rem 1rem; grid-template-columns: minmax(0, 1fr); }
.page-connect .connect-facts dt { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.025em; color: var(--muted-foreground); }
.page-connect .connect-facts dd { font-size: var(--text-sm); }
@media (min-width: 40rem) {
  .page-connect .connect-facts { grid-template-columns: 10rem minmax(0, 1fr); align-items: baseline; }
  .page-connect .connect-facts dt { padding-top: 0.125rem; }
}

/* the key switch */
.page-connect .connect-key-switch { cursor: pointer; }
.page-connect .connect-key-switch::before {
  content: ""; width: 0.5rem; height: 0.5rem; border-radius: var(--radius-full);
  background: var(--muted-foreground); flex: none;
}
.page-connect .connect-key-switch[aria-checked="true"] {
  border-color: var(--primary-accent); color: var(--accent-text);
  background: color-mix(in oklab, var(--primary-accent) 5%, transparent);
}
.page-connect .connect-key-switch[aria-checked="true"]::before { background: var(--primary-accent); }

/* tools */
.page-connect .connect-tools { display: grid; gap: 0.75rem; }
.page-connect .connect-tool-list { display: grid; gap: 0.75rem; }
.page-connect .connect-tool {
  display: grid; gap: 0.25rem; padding: 0.75rem 0.875rem;
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--background);
}
.page-connect .connect-tool dt code { font-size: var(--text-sm); font-weight: 600; }
.page-connect .connect-tool dd { color: var(--muted-foreground); }

/* snippets */
.page-connect .connect-snippets { gap: 1.25rem; }
.page-connect .connect-snippet { display: grid; gap: 0.5rem; }
.page-connect .connect-snippet-head { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: 0.5rem; }
.page-connect .connect-snippet-title { gap: 0.125rem; min-width: 12rem; flex: 1 1 16rem; }
.page-connect .connect-code {
  margin: 0; padding: 0.75rem 0.875rem; overflow-x: auto; max-width: 100%;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: color-mix(in oklab, var(--muted) 45%, transparent);
  font-size: var(--text-xs); line-height: 1.5; tab-size: 2;
}
.page-connect .connect-code:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.page-connect .connect-code code { white-space: pre; font-family: var(--font-mono); }

/* limits */
.page-connect .connect-limits { display: grid; gap: 0.75rem; }
.page-connect .connect-limit-list { display: grid; gap: 0.5rem; }
.page-connect .connect-limit {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 0.25rem 0.75rem;
  padding-bottom: 0.5rem; border-bottom: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
  font-size: var(--text-sm);
}
.page-connect .connect-limit:last-child { border-bottom: 0; padding-bottom: 0; }
.page-connect .connect-limit dd:nth-of-type(2) { grid-column: 1 / -1; }
.page-connect .connect-usage-link { margin-top: 0.25rem; }

@media (max-width: 30rem) {
  .page-connect .connect-card :is(.card-header, .card-content) { padding-inline: 1rem; }
  .page-connect .connect-snippet-head { flex-direction: column; align-items: stretch; }
  /* stacked, the basis would set a height rather than a width */
  .page-connect .connect-snippet-title { flex: 0 0 auto; min-width: 0; }
  .page-connect .connect-limit { grid-template-columns: minmax(0, 1fr) auto; }
}