/* ==========================================================================
   Payee Global developers page. Cream MASTER tokens only (pg-site / pg-plus);
   per-page override: design-system/payeeglobal/pages/developers.md (VISUAL_DENSITY 5).
   Layout: fixed header bar, hero, then a sticky glass contents rail (>=980px) beside a
   reading column (prose held near 72ch, code panels to the column width).
   ========================================================================== */
.dx-wrap{ max-width:1320px; margin:0 auto; padding-left:max(var(--gutter), env(safe-area-inset-left)); padding-right:max(var(--gutter), env(safe-area-inset-right)); }

/* hero */
.dx-hero{ position:relative; padding:var(--s10) 0 var(--s7); }
.dx-hero .wrap,.dx-hero .dx-wrap{ position:relative; z-index:1; }
.dx-hero h1{ margin-top:var(--s2); }
.dx-hero .lead{ margin-top:var(--s5); max-width:720px; }
.dx-facts{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; margin-top:var(--s7); border-radius:var(--r);
  background:var(--glass); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); border:1px solid var(--glass-edge); box-shadow:var(--shadow); overflow:hidden; }
.dx-facts > div{ padding:var(--s4) var(--s5); border-right:1px solid var(--hair); border-bottom:1px solid var(--hair); }
.dx-facts > div:nth-child(3n){ border-right:0; }
.dx-facts > div:nth-last-child(-n+3){ border-bottom:0; }
.dx-facts dt{ font-family:'Plex',monospace; font-weight:600; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--blood-deep); }
.dx-facts dd{ margin-top:var(--s2); font-size:15px; line-height:1.45; color:var(--ink); }
.dx-facts code{ font-size:13px; }

/* two-column body */
.dx-grid{ display:grid; grid-template-columns:248px minmax(0,1fr); gap:var(--s8); align-items:start; padding-bottom:var(--s10); }
.dx-toc{ position:sticky; top:96px; max-height:calc(100vh - 116px); overflow:auto; overscroll-behavior:contain; border-radius:var(--r);
  background:var(--glass); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); border:1px solid var(--glass-edge); box-shadow:var(--shadow);
  padding:var(--s4) var(--s3) var(--s5); scrollbar-width:thin; }
.dx-tl{ font-family:'Plex',monospace; font-weight:600; font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--blood-deep); margin:var(--s4) var(--s3) var(--s2); }
.dx-tl:first-child{ margin-top:var(--s1); }
.dx-tocn ul{ list-style:none; }
.dx-tocn a{ position:relative; display:flex; align-items:center; gap:var(--s2); min-height:34px; padding:var(--s1) var(--s3); border-radius:10px;
  font-size:14px; line-height:1.3; color:var(--ink-soft); text-decoration:none; transition:color var(--t-micro) var(--ease-hover), background-color var(--t-micro) var(--ease-hover); }
.dx-tocn a:hover{ color:var(--blood-deep); background:rgba(251,247,242,.6); }
.dx-tocn a[aria-current="true"]{ color:var(--blood-deep); font-variation-settings:'wght' 650,'wdth' 100; background:rgba(140,29,34,.07); }
.dx-tocn a[aria-current="true"]::before{ content:""; position:absolute; left:2px; top:50%; width:2px; height:16px; margin-top:-8px; border-radius:2px; background:var(--blood); }
.dx-tocm{ display:none; }

/* reading column: a cream veil keeps the constellation out from behind running text */
.dx-body{ position:relative; min-width:0; }
.dx-body::before{ content:""; position:absolute; inset:-24px -32px; pointer-events:none; background:var(--cream); opacity:.9; border-radius:28px;
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 120px, #000 calc(100% - 120px), transparent);
  mask-image:linear-gradient(to bottom, transparent, #000 120px, #000 calc(100% - 120px), transparent); }
.dx-body > *{ position:relative; }
.dx-sec,.dx-op,.dx-part,.dx-sub h3,[id]{ scroll-margin-top:104px; }
.dx-sec{ padding-bottom:var(--s8); }
.dx-part{ padding-top:var(--s5); }
.dx-part-l{ display:flex; align-items:center; gap:var(--s3); font-family:'Plex',monospace; font-weight:600; font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--blood); margin-bottom:var(--s6); }
.dx-part-l::after{ content:""; flex:1; height:1px; background:var(--line); }
.dx-gh{ margin-bottom:var(--s5); }
.dx-kick{ display:block; font-family:'Plex',monospace; font-weight:600; font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--blood-deep); margin-bottom:var(--s2); }
.dx-gh h2{ font-size:clamp(28px,3vw,42px); line-height:1; letter-spacing:-.025em; font-variation-settings:'wght' 800,'wdth' 92; color:var(--ink); text-wrap:balance; }

/* prose */
.dx-prose{ font-size:16px; line-height:1.65; color:var(--ink-soft); }
.dx-prose > *,.dx-sub > *{ max-width:72ch; }
.dx-prose > .dx-sub,.dx-prose > .dx-table,.dx-prose > .dx-code,.dx-sub > .dx-code,.dx-sub > .dx-table,.dx-prose > .dx-callout,.dx-sub > .dx-callout{ max-width:none; }
.dx-prose p,.dx-prose ul,.dx-prose ol{ margin:0 0 var(--s4); }
.dx-prose ul,.dx-prose ol{ padding-left:1.25em; }
.dx-prose li{ margin:0 0 var(--s2); padding-left:.2em; }
.dx-prose li::marker{ color:var(--blood); }
.dx-prose strong{ color:var(--ink); font-variation-settings:'wght' 700,'wdth' 100; }
.dx-prose a{ color:var(--blood-deep); text-underline-offset:3px; text-decoration-thickness:1px; }
.dx-prose a:hover{ text-decoration-thickness:2px; }
.dx-prose h3{ font-size:22px; line-height:1.2; letter-spacing:-.015em; font-variation-settings:'wght' 750,'wdth' 95; color:var(--ink); margin:var(--s7) 0 var(--s3); text-wrap:balance; }
.dx-prose h4{ font-family:'Plex',monospace; font-weight:600; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink); margin:var(--s6) 0 var(--s3); }
.dx-sub:first-child h3{ margin-top:var(--s3); }
.dx-prose :not(pre) > code{ font-family:'Plex',monospace; font-size:.86em; padding:1px 6px; border-radius:6px; color:var(--ink); background:rgba(140,29,34,.07); border:1px solid rgba(140,29,34,.12); overflow-wrap:anywhere; }
.dx-facts dd code{ overflow-wrap:anywhere; }
.dx-facts code,.dx-ep code{ font-family:'Plex',monospace; }
.dx-checks{ list-style:none; padding-left:0 !important; }
.dx-chk{ position:relative; padding-left:30px !important; }
.dx-chk::before{ content:""; position:absolute; left:0; top:.3em; width:16px; height:16px; border-radius:5px; border:1.5px solid var(--blood); background:rgba(251,247,242,.7); }

/* tables: scroll inside their own box */
.dx-table{ margin:var(--s4) 0 var(--s5); overflow-x:auto; border-radius:var(--r-in); border:1px solid var(--line); background:rgba(251,247,242,.72); }
.dx-table table{ min-width:520px; }
.dx-table th{ text-align:left; padding:var(--s3) var(--s4); font-size:10px; letter-spacing:.16em; color:var(--ink-mute); border-bottom:1px solid var(--line); background:rgba(246,241,232,.6); white-space:nowrap; }
.dx-table td{ text-align:left; vertical-align:top; padding:var(--s3) var(--s4); font-size:14.5px; line-height:1.5; color:var(--ink-soft) !important; font-variation-settings:'wght' 400,'wdth' 100; }
.dx-table td:first-child{ color:var(--ink) !important; font-variation-settings:'wght' 600,'wdth' 100; }
.dx-table tbody tr{ border-top:1px solid var(--hair); }
.dx-table tbody tr:first-child{ border-top:0; }

/* code panels (pg-plus .pg-code) sized for docs */
.dx-code{ margin:var(--s4) 0 var(--s6); }
.dx-code .pc-pane pre,.dx-single pre{ max-height:560px; }
.dx-single .pc-top{ padding-top:var(--s2); padding-bottom:var(--s2); }
.dx-langs{ font-size:10px !important; letter-spacing:.2em; text-transform:uppercase; color:var(--code-mute) !important; }
.pc-ep b{ color:var(--rose); }

/* callout for built-not-deployed items */
.dx-callout{ margin:var(--s5) 0; padding:var(--s4) var(--s5) var(--s2); border-radius:var(--r-in); border:1px dashed rgba(140,29,34,.45); background:rgba(140,29,34,.045); }
.dx-callout-l{ display:inline-flex; align-items:center; gap:var(--s2); margin-bottom:var(--s3); font-family:'Plex',monospace; font-weight:600; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--blood-deep); }
.dx-callout-l::before{ content:""; width:8px; height:8px; border-radius:50%; border:1.5px solid var(--blood); }
.dx-callout-b h3{ margin-top:0 !important; }
.dx-callout-b > *{ max-width:72ch; }
.dx-callout-b > .dx-code{ max-width:none; }

/* reference operations */
.dx-op{ padding:var(--s6) 0 var(--s7); border-top:1px solid var(--line); }
.dx-part > .dx-op:first-of-type,.dx-lead-p + .dx-op{ border-top:0; padding-top:0; }
.dx-oph{ margin-bottom:var(--s4); }
.dx-oph h3{ font-size:clamp(24px,2.4vw,32px); line-height:1.05; letter-spacing:-.02em; font-variation-settings:'wght' 800,'wdth' 94; color:var(--ink); margin-bottom:var(--s3); }
.dx-ep{ display:inline-flex; align-items:center; gap:var(--s3); max-width:100%; padding:var(--s2) var(--s3) var(--s2) var(--s2); border-radius:12px; background:rgba(251,247,242,.8); border:1px solid var(--line); }
.dx-ep code{ font-size:14px; color:var(--ink); overflow-wrap:anywhere; }
.dx-m{ display:inline-flex; align-items:center; justify-content:center; flex:none; padding:4px 9px; border-radius:7px; font-family:'Plex',monospace; font-weight:600; font-size:11px; letter-spacing:.12em; color:var(--cream); background:var(--blood); }
.dx-m.sm{ font-size:10px; padding:3px 7px; }
.dx-m.xs{ font-size:8.5px; padding:2px 5px; border-radius:5px; letter-spacing:.08em; }
.dx-lead-p{ margin-bottom:var(--s6); }

/* response example tabs */
.dx-ex{ margin:var(--s3) 0 var(--s6); border-radius:var(--r-in); overflow:hidden; background:var(--code); color:var(--code-ink); border:1px solid rgba(255,255,255,.06); }
.dx-ex-tabs{ display:flex; gap:var(--s1); padding:var(--s2) var(--s2) 0; overflow-x:auto; scrollbar-width:none; border-bottom:1px solid var(--code-line); }
.dx-ex-tabs::-webkit-scrollbar{ display:none; }
.dx-ex-tabs button{ position:relative; flex:none; min-height:40px; padding:0 var(--s3); border:0; background:none; cursor:pointer; white-space:nowrap;
  font-family:'Plex',monospace; font-size:11px; letter-spacing:.04em; color:var(--code-mute); border-radius:8px 8px 0 0; }
.dx-ex-tabs button b{ font-weight:600; letter-spacing:.08em; margin-right:4px; color:inherit; }
.dx-ex-tabs button[aria-selected="true"]{ color:var(--code-ink); background:rgba(243,237,228,.06); }
.dx-ex-tabs button[aria-selected="true"]::after{ content:""; position:absolute; left:var(--s3); right:var(--s3); bottom:0; height:2px; border-radius:2px; background:var(--blood-lite); }
.dx-ex-tabs button:focus-visible{ outline:2px solid var(--rose); outline-offset:-3px; }
.dx-ex pre{ margin:0; padding:var(--s4) var(--s5); overflow-x:auto; font-family:'Plex',monospace; font-size:12.5px; line-height:1.7; max-height:420px; }
.dx-ex .s{ color:#F2C6A8; } .dx-ex .k{ color:var(--rose); } .dx-ex .n{ color:#E9D7A5; } .dx-ex .f{ color:#C9D7E8; } .dx-ex .c{ color:#8F8378; }

.dx-end{ padding-top:var(--s6); border-top:1px solid var(--line); }

/* small screens: contents collapse into a disclosure at the top */
@media (max-width:980px){
  .dx-grid{ grid-template-columns:minmax(0,1fr); gap:0; }
  .dx-toc{ display:none; }
  .dx-tocm{ display:block; margin:0 0 var(--s7); border-radius:var(--r); background:var(--glass); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
    border:1px solid var(--glass-edge); box-shadow:var(--shadow); }
  .dx-tocm summary{ list-style:none; cursor:pointer; min-height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 var(--s5);
    font-family:'Plex',monospace; font-weight:600; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink); }
  .dx-tocm summary::-webkit-details-marker{ display:none; }
  .dx-tocm summary::after{ content:""; width:8px; height:8px; border-right:1.5px solid var(--blood); border-bottom:1.5px solid var(--blood); transform:rotate(45deg) translateY(-2px); transition:transform var(--t-hover) var(--ease); }
  .dx-tocm[open] summary::after{ transform:rotate(-135deg) translateY(-2px); }
  .dx-tocm .dx-tocn{ padding:0 var(--s3) var(--s4); max-height:60vh; overflow:auto; }
  .dx-body::before{ inset:-16px -12px; }
  .dx-facts{ grid-template-columns:1fr 1fr; }
  .dx-facts > div:nth-child(3n){ border-right:1px solid var(--hair); }
  .dx-facts > div:nth-child(2n){ border-right:0; }
  .dx-facts > div:nth-last-child(-n+3){ border-bottom:1px solid var(--hair); }
  .dx-facts > div:nth-last-child(-n+2){ border-bottom:0; }
}
@media (max-width:620px){
  .dx-hero{ padding-top:112px; }
  .dx-facts{ grid-template-columns:1fr; }
  .dx-facts > div{ border-right:0 !important; border-bottom:1px solid var(--hair) !important; }
  .dx-facts > div:last-child{ border-bottom:0 !important; }
  .dx-prose{ font-size:15.5px; }
  .dx-ex pre,.dx-code pre{ font-size:11.5px; }
  .dx-ep{ flex-wrap:wrap; }
  .dx-table table{ min-width:480px; }
}
@media (prefers-reduced-motion: reduce){ .dx-tocm summary::after{ transition:none; } }
.dx-callout-b h3{ scroll-margin-top:140px; }
/* table cells: keep field names whole; the table scrolls inside its box instead */
.dx-table td :not(pre) > code{ overflow-wrap:normal; white-space:nowrap; }
@media (max-width:620px){ .dx-table table{ min-width:560px; } }