/**
 * Developers docs - Benefit Path cards + chrome on the auth gradient shell.
 */

body:has(.bp-public-topbar-shell) {
  --dev-topbar-h: calc(var(--sidebar-inset, .5rem) + var(--topbar-h, 56px) + var(--sidebar-inset, .5rem));
}

/* Crumb chrome matches dashboard (.topbar-crumb / .current in bp-system.css). */

@media (max-width: 720px) {
  #dev-crumbs .topbar-crumb:not(.topbar-crumb--icon):not(.current),
  #dev-crumbs .topbar-crumb-sep {
    display: none;
  }
}

.dev-page {
  --dev-primary: var(--c-primary-color, var(--c-primary, #5050ff));
  --dev-primary-light: var(--c-primary-light, #eef2ff);
  /* Match primary product white cards (not gray --c-bg) */
  --bp-card-bg: var(--c-surface, #fff);
  min-height: calc(100vh - var(--dev-topbar-h, 4rem));
  /* Override .auth-page vertical centering - docs should pin to top */
  justify-content: flex-start;
  align-items: center;
  padding: var(--space-16) clamp(var(--space-13), 2vw, var(--space-15a)) 3rem;
  /* overflow:hidden on .bp-auth-grad-bg breaks position:sticky */
  overflow: visible;
}

.dev-page .card,
.dev-section {
  background: var(--c-surface, #fff);
}

.dev-shell {
  display: grid;
  grid-template-columns: 13.5rem minmax(0, 1fr);
  gap: clamp(var(--space-13), 2.5vw, var(--space-15));
  align-items: start;
  width: 100%;
  max-width: min(1600px, 100%);
  margin: 0 auto;
}

.dev-shell--with-tryit {
  max-width: min(1760px, 100%);
  /* Banner full-width, then sidebar + equal docs / tester */
  grid-template-columns: 13.5rem minmax(0, 1fr) minmax(0, 1fr);
}

.dev-wip-banner {
  grid-column: 1 / -1;
}

.dev-wip-banner .dashboard-banner {
  margin: 0;
}

.dev-card--tryit {
  position: sticky;
  top: calc(var(--dev-topbar-h, 3.75rem) + var(--space-14));
  align-self: start;
  min-width: 0;
}

.dev-tryit .form-group {
  margin-bottom: var(--space-12);
}

.dev-tryit-editor {
  margin: 0 0 var(--space-13);
  border-radius: var(--bp-card-radius);
  background: var(--bp-code-bg);
  color: var(--bp-code-fg);
  box-shadow: var(--bp-shadow);
  border: 1px solid var(--bp-code-border);
  overflow: hidden;
}

.dev-tryit-lang-tabs.analytics-tabs {
  flex-wrap: wrap;
  gap: var(--space-6);
  margin: 0;
  padding: var(--space-9) var(--space-8a);
  border-bottom: 1px solid var(--bp-code-border);
  background: var(--bp-code-toolbar-bg);
}

.dev-tryit-lang-tabs .analytics-tab,
.dev-code-toolbar .analytics-tab {
  color: var(--bp-code-muted);
  background: transparent;
  box-shadow: none;
  border: 0;
}

.dev-tryit-lang-tabs .analytics-tab:hover:not(.is-active):not(:disabled),
.dev-code-toolbar .analytics-tab:hover:not(.is-active):not(:disabled) {
  color: var(--bp-code-fg);
  background: var(--bp-code-tab-hover);
  box-shadow: none;
}

.dev-tryit-lang-tabs .analytics-tab.is-active,
.dev-code-toolbar .analytics-tab.is-active {
  color: var(--bp-code-fg);
  background: var(--bp-code-tab-active);
  box-shadow: none;
}

.dev-tryit-lang-tabs .dev-tryit-copy {
  margin-left: auto;
}

/* Toolbar chrome lives in code-highlight.css (.dev-code-toolbar). */

.dev-code-toolbar .dev-code-copy {
  margin-left: auto;
}

.dev-tryit-code {
  display: block;
  width: 100%;
  min-height: 14rem;
  margin: 0;
  padding: var(--space-12) var(--space-13) var(--space-13);
  border: 0;
  resize: vertical;
  background: transparent;
  color: var(--bp-code-fg);
  caret-color: var(--bp-code-caret);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
  font-size: var(--bp-text-sm);
  line-height: 1.55;
  box-sizing: border-box;
  outline: none;
  white-space: pre;
  overflow-x: auto;
}

.dev-tryit-editor .bp-code-hl.is-wrap .bp-code-hl-surface > .bp-code-hl-pre,
.dev-tryit-editor .bp-code-hl.is-wrap .bp-code-hl-surface > .bp-code-lint,
.dev-tryit-editor .bp-code-hl.is-wrap .bp-code-hl-surface > .dev-tryit-code {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  overflow-x: hidden;
}

.dev-tryit-code:focus {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--dev-primary) 45%, transparent);
}

.dev-tryit-response {
  margin-top: var(--space-11);
}

.dev-tryit-response .dev-code {
  margin: 0;
  max-height: min(420px, 50vh);
}

.dev-tryit-response .dev-code pre {
  max-height: inherit;
}

.dev-sidebar {
  position: sticky;
  top: calc(var(--dev-topbar-h, 3.75rem) + var(--space-14));
  align-self: start;
  z-index: 2;
}

.dev-sidebar-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-11);
}

.dev-sidebar-nav {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: var(--space-5);
  margin: 0;
}

.dev-nav-link {
  display: block;
  padding: var(--space-1) var(--space-1);
  font-size: var(--bp-text-md);
  font-weight: 500;
  line-height: 1.35;
  color: var(--c-text-muted);
  text-decoration: none;
  background: transparent;
  border: none;
  box-shadow: none;
  cursor: pointer;
}

.dev-nav-link:hover {
  color: var(--c-text);
  text-decoration: underline;
  background: transparent;
  box-shadow: none;
}

.dev-nav-link.is-active {
  color: var(--dev-primary);
  font-weight: 600;
  background: transparent;
  box-shadow: none;
}

.dev-nav-link--op {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  font-size: var(--bp-text-sm);
  font-weight: 400;
  padding-left: var(--space-1);
}

.dev-nav-op-title {
  min-width: 0;
  line-height: 1.3;
}

.dev-nav-link[aria-disabled="true"] {
  opacity: .55;
  cursor: default;
  pointer-events: none;
}

.dev-nav-link[aria-disabled="true"] em {
  font-style: normal;
  font-size: var(--bp-text-xs);
  margin-left: var(--space-4);
  font-weight: 400;
}

.dev-nav-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  width: 100%;
}

/* Top-level section labels (Overview / Calendar / ...) - same type, chevron only on dropdowns */
.dev-nav-section-tab,
.dev-nav-group-summary {
  display: block;
  list-style: none;
  cursor: pointer;
  font-size: var(--bp-text-sm);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  padding: var(--space-2) var(--space-1);
  user-select: none;
  text-decoration: none;
  background: transparent;
  border: none;
  box-shadow: none;
}

.dev-nav-section-tab:hover,
.dev-nav-group-summary:hover {
  color: var(--c-text);
  text-decoration: none;
}

.dev-nav-group-summary::-webkit-details-marker {
  display: none;
}

.dev-nav-group-summary::before {
  content: "";
  display: inline-block;
  width: .85rem;
  height: .85rem;
  margin-right: var(--space-5);
  vertical-align: middle;
  background-color: currentColor;
  -webkit-mask: url('/static/img/icons/chevron-right.svg') center / contain no-repeat;
  mask: url('/static/img/icons/chevron-right.svg') center / contain no-repeat;
  transition: transform var(--dur) var(--ease);
}

.dev-nav-group[open] > .dev-nav-group-summary::before {
  transform: rotate(90deg);
}

.dev-nav-section-tab.is-active,
.dev-nav-group-summary.is-active,
.dev-nav-group[open] > .dev-nav-group-summary {
  color: var(--dev-primary);
}

.dev-nav-group-children {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
  margin: 0;
  padding-left: var(--space-5);
}

.dev-nav-section-link {
  color: inherit;
  text-decoration: none;
}

.dev-nav-section-link:hover {
  text-decoration: underline;
}

.dev-hub-list {
  margin: 0;
  padding-left: var(--space-13b);
  display: flex;
  flex-direction: column;
  gap: var(--space-9);
}

.dev-hub-list li {
  line-height: 1.55;
}

.dev-op-siblings {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5) var(--space-11);
  font-size: var(--bp-text-lg);
  color: var(--c-text-muted);
}

.dev-mobile-nav {
  display: none;
  margin: 0 0 var(--space-14);
}

.dev-main {
  min-width: 0;
}

.dev-eyebrow {
  margin: 0 0 var(--space-5);
  font-size: var(--bp-text-sm);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--dev-primary);
}

.dev-title {
  margin: 0 0 var(--space-5);
  font-size: var(--bp-text-xl);
  font-weight: 700;
  color: var(--c-text);
}

.dev-lead {
  margin: 0;
  font-size: var(--bp-text-lg);
  color: var(--c-text-muted);
  line-height: 1.55;
}

.dev-main-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-13);
  min-width: 0;
}

.dev-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-13);
  min-width: 0;
}

.dev-section {
  background: var(--c-surface, #fff);
  border: 1px solid transparent;
  border-radius: var(--bp-card-radius);
  box-shadow: var(--bp-shadow);
  padding: 0 0 var(--bp-card-inset, var(--space-8));
  overflow: hidden;
}

.dev-section > h2,
.dev-section > .dev-endpoint:first-child {
  margin: var(--bp-card-inset, var(--space-8)) var(--bp-card-inset, var(--space-8)) 0;
  padding: var(--space-10) var(--space-12a);
  font-size: var(--bp-text-md);
  font-weight: 600;
  line-height: 1.35;
  color: var(--c-text);
  background: var(--btn-chrome-bg);
  border: 1px solid transparent;
  border-radius: var(--radius);
  box-shadow: var(--bp-shadow);
}

.dev-section > *:not(h2) {
  margin-left: var(--space-14);
  margin-right: var(--space-14);
}

.dev-section > .dev-endpoint:first-child {
  margin-left: var(--bp-card-inset, var(--space-8));
  margin-right: var(--bp-card-inset, var(--space-8));
}

.dev-section > h2 + *,
.dev-section > .dev-endpoint:first-child + *,
.dev-section > *:not(h2):not(.dev-endpoint):first-child {
  margin-top: var(--space-13);
}

.dev-section > *:last-child {
  margin-bottom: var(--space-11);
}

.dev-section h3 {
  /* Keep horizontal inset from `.dev-section > *:not(h2)`; only set vertical rhythm here. */
  margin-top: var(--space-13a);
  margin-bottom: var(--space-8);
  font-size: var(--bp-text-lg);
  font-weight: 600;
  color: var(--c-text);
}

.dev-section p,
.dev-section li,
.dev-section td,
.dev-hub-desc {
  font-size: var(--bp-text-lg);
  color: var(--c-text-muted);
  line-height: 1.55;
}

.dev-section ul,
.dev-section ol {
  margin: var(--space-8) 0 var(--space-13) var(--space-14);
  padding: 0;
}

.dev-section a {
  color: var(--dev-primary);
  text-decoration: none;
  font-weight: 500;
}

.dev-section a:hover {
  text-decoration: underline;
}

.dev-section code {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
  font-size: var(--bp-text-sm);
  background: var(--btn-chrome-bg);
  color: var(--c-text);
  padding: .08rem .32rem;
  border-radius: var(--radius);
  box-shadow: var(--bp-shadow);
}

.dev-endpoint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-9);
  margin: 0 0 var(--space-12);
}

.dev-section > .dev-endpoint:first-child {
  margin-bottom: 0;
}

/* Compact contacts-pill for nav / sibling method labels */
.contacts-pill--sm,
.dev-method-pill.contacts-pill--sm {
  padding: var(--space-1) var(--space-8);
  font-size: var(--bp-text-xs);
  letter-spacing: .03em;
  min-width: 2.4rem;
  justify-content: center;
}

.dev-method-pill {
  flex: 0 0 auto;
  min-width: 3.1rem;
  justify-content: center;
  letter-spacing: .04em;
  font-size: var(--bp-text-sm);
  padding: var(--space-2a) var(--space-10);
}

.dev-op-sibling {
  display: inline-flex;
  align-items: center;
  gap: var(--space-5);
  text-decoration: none;
}

.dev-op-sibling:hover {
  text-decoration: underline;
}

.dev-path {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
  font-size: var(--bp-text-md);
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.dev-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-8) 0 var(--space-13);
  font-size: var(--bp-text-lg);
}

.dev-table th,
.dev-table td {
  text-align: left;
  padding: var(--space-9) var(--space-7);
  border-bottom: 1px solid var(--c-border);
  vertical-align: top;
}

.dev-table th {
  font-weight: 600;
  color: var(--c-text-muted);
  font-size: var(--bp-text-sm);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.dev-code {
  position: relative;
  margin: var(--space-11) 0 var(--space-13b);
  border-radius: var(--bp-card-radius);
  background: var(--bp-code-bg);
  color: var(--bp-code-fg);
  box-shadow: var(--bp-shadow);
  border: 1px solid var(--bp-code-border);
  overflow: hidden;
}

.dev-code-copy {
  cursor: pointer;
  font-family: inherit;
}

.dev-code pre {
  margin: 0;
  padding: var(--space-12) var(--space-13) var(--space-13);
  overflow-x: auto;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
  font-size: var(--bp-text-sm);
  line-height: 1.55;
  background: transparent;
  color: inherit;
}

/* Beat .dev-section code chrome (light pill) inside dark samples */
.dev-code code,
.dev-section .dev-code code {
  font-family: inherit;
  font-size: inherit;
  background: transparent !important;
  color: inherit !important;
  padding: 0 !important;
  border-radius: 0;
  box-shadow: none !important;
}

.dev-code:last-child {
  margin-bottom: 0;
}

.dev-footer {
  text-align: center;
  color: var(--c-text-muted);
  font-size: var(--bp-text-md);
}

.dev-footer .card-body {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}

.dev-footer p {
  margin: 0;
}

.dev-footer a {
  color: var(--c-text-muted);
  text-decoration: none;
}

.dev-footer a:hover {
  color: var(--dev-primary);
}

@media (max-width: 1100px) {
  .dev-shell--with-tryit {
    grid-template-columns: 13.5rem minmax(0, 1fr);
  }

  .dev-card--tryit {
    position: static;
    grid-column: 2;
  }
}

@media (max-width: 860px) {
  .dev-shell--with-tryit {
    grid-template-columns: 1fr;
  }

  .dev-sidebar {
    display: none;
  }

  .dev-mobile-nav {
    display: block;
  }

  .dev-card--tryit {
    grid-column: 1;
    order: -1;
  }
}