/*
 * Developer docs (/docs/): code-first hero, sticky contents with the current
 * section highlighted, and long-form reference sections.
 * Tokens and hp-* components come from public.css.
 */

/* ---------- Hero ---------- */
.dc-hero { padding: clamp(44px, 4.2vw, 88px) 0; border-bottom: 1px solid var(--hp-line-soft); background-color: var(--hp-canvas); background-image: radial-gradient(860px 300px at 50% 0, #eef7df 0, transparent 68%); background-repeat: no-repeat; }
.dc-hero__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: clamp(36px, 4.4vw, 96px); }
.dc-hero__copy { display: grid; justify-items: start; }
.dc-hero h1 { margin: clamp(14px, 1.2vw, 22px) 0 clamp(16px, 1.4vw, 24px); font-size: var(--hp-fs-display); line-height: 1.32; }
.dc-hero__lead { max-width: 32em; margin: 0; color: var(--hp-muted); font-size: var(--hp-fs-lead); line-height: 1.85; }
.dc-hero__links { display: flex; flex-wrap: wrap; gap: .6em 1.6em; margin: clamp(22px, 2vw, 36px) 0 0; padding: 0; list-style: none; }

/* ---------- Code windows ---------- */
.dc-code { overflow: hidden; border: 1px solid #2c3530; border-radius: var(--hp-radius); background: #1d2521; box-shadow: var(--hp-shadow-float); font-size: clamp(12px, .78vw, 14.5px); }
.dc-code__bar { display: flex; align-items: center; justify-content: space-between; gap: 1em; min-height: 3.3em; padding: .5em .7em .5em 1.2em; border-bottom: 1px solid rgba(255, 255, 255, .07); color: #9fb0a5; font-family: var(--hp-mono); font-size: max(12px, .92em); }
.dc-code__tools { display: flex; align-items: center; gap: .9em; font-family: var(--hp-sans); }
.dc-copy { display: inline-flex; align-items: center; gap: .45em; min-height: 2.2em; padding: 0 .75em; border: 1px solid rgba(255, 255, 255, .12); border-radius: 7px; color: #c5d1c9; background: rgba(255, 255, 255, .04); font: inherit; font-size: max(12px, .9em); cursor: pointer; transition: border-color .16s ease, color .16s ease, background-color .16s ease; }
.dc-copy .hp-ico { font-size: 1.05em; }
.dc-copy:hover { border-color: rgba(163, 214, 190, .45); color: #eef5ef; background: rgba(255, 255, 255, .07); }
.dc-copy:focus-visible { outline: 2px solid #9fd3bc; outline-offset: 2px; }
.dc-copy.is-copied { border-color: rgba(163, 214, 190, .5); color: #b9e2cf; }
.dc-copy.is-error { border-color: rgba(236, 160, 154, .55); color: #f1bbb5; }
.dc-code pre { overflow: auto; margin: 0; padding: 1.5em 1.6em; color: #d9e4dc; font: 400 1em/1.8 var(--hp-mono); white-space: pre; tab-size: 2; -webkit-overflow-scrolling: touch; }
.dc-code code { font: inherit; }
.sx-cmd { color: #eef4ef; }
.sx-flag { color: #9dc9b5; }
.sx-head { color: #e2c78f; }
.sx-key { color: #a6d5b3; }
.sx-str { color: #ecd6a2; }
.sx-bool { color: #c3b8e6; }
.sx-event { color: #8fc6b0; }
.sx-done { color: #a7b5ab; }

/* ---------- Layout: contents + reference ---------- */
.dc-layout { display: grid; grid-template-columns: minmax(0, 14em) minmax(0, 1fr); gap: clamp(36px, 4.6vw, 104px); padding: clamp(48px, 4.4vw, 88px) 0 clamp(64px, 6vw, 120px); font-size: var(--hp-fs-body); }
.dc-nav { position: sticky; top: calc(clamp(64px, 4.3vw, 82px) + 28px); align-self: start; display: grid; gap: .15em; }
.dc-nav__label { margin: 0 0 .7em; color: var(--hp-label); font-size: var(--hp-fs-label); letter-spacing: .16em; }
.dc-nav a { padding: .5em .9em; border-left: 1px solid var(--hp-line); color: var(--hp-muted); font-size: max(12px, .92em); transition: color .16s ease, border-color .16s ease; }
.dc-nav a:hover { color: var(--hp-ink); }
.dc-nav a[aria-current="true"] { border-color: var(--hp-jade); color: var(--hp-jade-deep); }
.dc-nav a:focus-visible { outline: 2px solid #31866f; outline-offset: 2px; }
.dc-content { min-width: 0; max-width: 60em; }
.dc-section { scroll-margin-top: calc(clamp(64px, 4.3vw, 82px) + 24px); padding-bottom: clamp(40px, 3.6vw, 68px); }
.dc-section + .dc-section { padding-top: clamp(40px, 3.6vw, 68px); border-top: 1px solid var(--hp-line-soft); }
.dc-section h2 { display: flex; align-items: center; gap: .5em; margin-bottom: .6em; font-size: var(--hp-fs-h2); line-height: 1.4; }
.dc-h2-icon { display: inline-flex; flex: none; color: #7e978c; }
.dc-h2-icon .hp-ico { width: .82em; height: .82em; stroke-width: 1.5; }
.dc-section > p { max-width: 44em; margin: 0 0 1.2em; color: var(--hp-muted); line-height: 1.9; }
/* Long-form reference text breaks normally. */
:where(.dc-content) :is(p, li, td, small) { word-break: normal; text-wrap: pretty; }
.dc-content code:not(pre code) { padding: .12em .42em; border-radius: 5px; color: var(--hp-jade-deep); background: var(--hp-tint); font-size: max(12px, .88em); }

.dc-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 1.6em 0 0; padding: 0; overflow: hidden; border: 1px solid var(--hp-line); border-radius: var(--hp-radius); background: var(--hp-line-soft); list-style: none; counter-reset: dc-step; }
.dc-steps li { position: relative; display: grid; align-content: start; gap: .45em; padding: 1.4em 1.4em 1.5em; background: #fff; counter-increment: dc-step; }
.dc-step__icon { display: inline-flex; margin-bottom: .3em; color: #7e978c; }
.dc-step__icon .hp-ico { width: 18px; height: 18px; stroke-width: 1.5; }
.dc-steps li::before { content: counter(dc-step, decimal-leading-zero); position: absolute; top: 1.5em; right: 1.4em; color: var(--hp-faint); font-family: var(--hp-num); font-size: max(12px, .82em); letter-spacing: .1em; }
.dc-steps strong { color: var(--hp-ink); font-size: 1.02em; font-weight: 500; }
.dc-steps p { margin: 0; color: var(--hp-muted); font-size: max(12px, .9em); line-height: 1.75; }

.dc-table { width: 100%; margin: 1.4em 0 0; border-collapse: separate; border-spacing: 0; overflow: hidden; border: 1px solid var(--hp-line); border-radius: var(--hp-radius); background: #fff; }
.dc-table th, .dc-table td { padding: 1em 1.2em; border-bottom: 1px solid var(--hp-line-soft); text-align: left; vertical-align: top; }
.dc-table tr:last-child th, .dc-table tr:last-child td { border-bottom: 0; }
.dc-table th { width: 11em; color: var(--hp-ink); background: #fbfcfa; font-family: var(--hp-mono); font-size: max(12px, .88em); font-weight: 500; }
.dc-table td { color: var(--hp-muted); line-height: 1.8; }
/* Parameter rows: a small, quiet tag ahead of the description (one restrained style). */
.dc-table th code { font-family: var(--hp-mono); font-weight: 500; }
.dc-table td:has(.dc-tag) { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35em .7em; }
.dc-td-body { flex: 1; min-width: 12em; }
.dc-tag { display: inline-flex; align-items: center; padding: .16em .55em; border: 1px solid var(--hp-line); border-radius: 999px; color: #648474; background: #f6f8f5; font-family: var(--hp-mono); font-size: max(11px, .78em); font-weight: 400; letter-spacing: .01em; white-space: nowrap; }
.dc-tag--req { color: var(--hp-jade-deep); border-color: #cfe2d8; background: var(--hp-tint); }
.dc-status { display: inline-flex; justify-content: center; min-width: 3.2em; padding: .15em .5em; border: 1px solid var(--hp-line); border-radius: 6px; color: var(--hp-text); background: #f6f8f5; font-family: var(--hp-mono); font-size: max(12px, .95em); }
/* One restrained style for all codes, matching the pricing page's single-tone palette. */
.dc-status--req, .dc-status--auth, .dc-status--limit { color: var(--hp-text); background: #f6f8f5; }
.dc-status--warn { color: var(--hp-jade-deep); border-color: #cfe2d8; background: var(--hp-tint); }
.dc-note { margin: 1.4em 0 0; padding: 1em 1.2em; border-left: 2px solid #7fb39d; border-radius: 0 10px 10px 0; color: var(--hp-text); background: var(--hp-wash); font-size: max(12px, .92em); line-height: 1.85; }
.dc-section > .dc-note { max-width: none; margin-bottom: 0; }
.dc-hero__lead { word-break: normal; }
.dc-list { display: grid; margin: 1.2em 0 0; padding: 0; list-style: none; }
.dc-list li { display: grid; grid-template-columns: 7em minmax(0, 1fr); gap: 1.2em; padding: 1em 0; border-top: 1px solid var(--hp-line-soft); color: var(--hp-muted); line-height: 1.8; }
.dc-list li:last-child { border-bottom: 1px solid var(--hp-line-soft); }
.dc-list strong { color: var(--hp-ink); font-weight: 500; }
/* Icon list: a small line icon as a bullet (no frame), then the label and description. */
.dc-list--icon li { grid-template-columns: 1.6em minmax(6em, 8em) minmax(0, 1fr); align-items: center; gap: .4em 1em; }
.dc-list__icon { display: inline-flex; align-items: center; color: #7e978c; }
.dc-list__icon .hp-ico { width: 16px; height: 16px; stroke-width: 1.5; }
.dc-list--icon strong { align-self: center; }
.dc-list--icon span { align-self: center; }
.dc-section .dc-code { margin-top: 1.4em; box-shadow: none; }
.dc-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .8em 1.4em; margin-top: 1.8em; }
.dc-cta p { margin: 0; color: var(--hp-muted); font-size: var(--hp-fs-small); }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .dc-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .dc-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .dc-nav { position: static; display: flex; flex-wrap: wrap; gap: .4em; }
  .dc-nav__label { width: 100%; margin: 0 0 .2em; }
  .dc-nav a { padding: .45em .85em; border: 1px solid var(--hp-line); border-radius: 999px; background: #fff; font-size: max(12px, .88em); }
  .dc-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .dc-code pre { padding: 1.1em 1em; font-size: max(12px, .92em); }
  .dc-code__tools > span { display: none; }
  .dc-steps { grid-template-columns: minmax(0, 1fr); }
  .dc-steps li::before { top: auto; bottom: 1.5em; }
  .dc-table, .dc-table tbody, .dc-table tr, .dc-table th, .dc-table td { display: block; width: 100%; }
  .dc-table th { border-bottom: 0; padding-bottom: .3em; }
  .dc-table td { padding-top: .3em; }
  .dc-table td:has(.dc-tag) { padding-top: .3em; }
  .dc-list li { grid-template-columns: minmax(0, 1fr); gap: .2em; }
  .dc-list--icon li { grid-template-columns: 1.6em minmax(0, 1fr); gap: .3em 1em; }
  .dc-list--icon .dc-list__icon { grid-row: span 2; align-self: start; }
}