/**
 * 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));
}

.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));
  /* 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(1rem, 2.5vw, 1.5rem);
  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) + 1.25rem);
  align-self: start;
  min-width: 0;
}

.dev-tryit-lead {
  margin: 0 0 1rem;
  font-size: .875rem;
  color: var(--c-text-muted);
  line-height: 1.55;
}

.dev-tryit .form-group {
  margin-bottom: .85rem;
}

.dev-tryit-editor {
  margin: 0 0 1rem;
  border-radius: var(--bp-card-radius);
  background: #0f172a;
  color: #e2e8f0;
  box-shadow: var(--bp-shadow);
  border: 1px solid transparent;
  overflow: hidden;
}

.dev-tryit-lang-tabs.analytics-tabs {
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0;
  padding: .55rem .6rem;
  border-bottom: 1px solid rgba(148, 163, 184, .22);
  background: rgba(15, 23, 42, .96);
}

.dev-tryit-lang-tabs .analytics-tab,
.dev-code-toolbar .analytics-tab {
  color: #94a3b8;
  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: #e2e8f0;
  background: rgba(148, 163, 184, .14);
  box-shadow: none;
}

.dev-tryit-lang-tabs .analytics-tab.is-active,
.dev-code-toolbar .analytics-tab.is-active {
  color: #e2e8f0;
  background: rgba(148, 163, 184, .2);
  box-shadow: none;
}

.dev-code-toolbar.analytics-tabs {
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .4rem;
  margin: 0;
  padding: .55rem .6rem;
  border-bottom: 1px solid rgba(148, 163, 184, .22);
  background: rgba(15, 23, 42, .96);
}

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

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

.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: .75rem;
}

.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) + 1.25rem);
  align-self: start;
  z-index: 2;
}

.dev-sidebar-body {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.dev-sidebar-kicker {
  margin: .35rem 0 0;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.dev-sidebar-tabs.analytics-tabs {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: .45rem;
  margin: 0;
}

.dev-nav-group {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  width: 100%;
}

.dev-nav-group-summary {
  list-style: none;
  cursor: pointer;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  padding: .2rem .15rem;
  user-select: none;
}

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

.dev-nav-group-summary::before {
  content: "";
  display: inline-block;
  width: .4rem;
  height: .4rem;
  margin-right: .4rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  vertical-align: middle;
  transition: transform var(--dur) var(--ease);
}

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

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

.dev-nav-group-children.analytics-tabs {
  flex-direction: column;
  align-items: stretch;
  gap: .4rem;
  margin: 0;
  padding-left: .15rem;
}

.dev-sidebar-tabs .analytics-tab {
  justify-content: flex-start;
  width: 100%;
  text-decoration: none;
  box-sizing: border-box;
}

.dev-sidebar-tabs .analytics-tab[aria-disabled="true"] {
  opacity: .55;
  cursor: default;
  pointer-events: none;
}

.dev-sidebar-tabs .analytics-tab[aria-disabled="true"] em {
  font-style: normal;
  font-size: .7rem;
  margin-left: .3rem;
  font-weight: 400;
}

.dev-mobile-nav {
  display: none;
  margin: 0 0 1.25rem;
}

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

.dev-eyebrow {
  margin: 0 0 .35rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--dev-primary);
}

.dev-title {
  margin: 0 0 .35rem;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--c-text);
}

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

.dev-main-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.dev-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  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, .5rem);
  overflow: hidden;
}

.dev-section > h2,
.dev-section > .dev-endpoint:first-child {
  margin: var(--bp-card-inset, .5rem) var(--bp-card-inset, .5rem) 0;
  padding: .65rem .9rem;
  font-size: .9rem;
  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: 1.25rem;
  margin-right: 1.25rem;
}

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

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

.dev-section > *:last-child {
  margin-bottom: .75rem;
}

.dev-section h3 {
  margin: 1.1rem 0 .5rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--c-text);
}

.dev-section p,
.dev-section li {
  line-height: 1.7;
  color: var(--c-text);
}

.dev-section ul,
.dev-section ol {
  margin: .5rem 0 1rem 1.25rem;
  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: .84em;
  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: .55rem;
  margin: 0 0 .85rem;
}

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

.dev-method {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.4rem;
  padding: .25rem .55rem;
  border-radius: var(--radius);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  border: 1px solid transparent;
  box-shadow: var(--bp-shadow);
}

.dev-method--get {
  color: var(--dev-primary);
  background: color-mix(in srgb, var(--dev-primary-light) 80%, var(--bp-card-bg));
}

.dev-method--post {
  color: #fff;
  background: var(--dev-primary);
}

.dev-method--other {
  color: var(--c-text);
  background: var(--btn-chrome-bg);
}

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

.dev-table {
  width: 100%;
  border-collapse: collapse;
  margin: .5rem 0 1rem;
  font-size: .875rem;
}

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

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

.dev-code {
  position: relative;
  margin: .75rem 0 1.15rem;
  border-radius: var(--bp-card-radius);
  background: #0f172a;
  color: #e2e8f0;
  box-shadow: var(--bp-shadow);
  border: 1px solid transparent;
  overflow: hidden;
}

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

.dev-code pre {
  margin: 0;
  padding: .85rem 1rem 1rem;
  overflow-x: auto;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
  font-size: .8125rem;
  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: .85rem;
}

.dev-footer .card-body {
  padding-top: .85rem;
  padding-bottom: .85rem;
}

.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,
  .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;
  }
}