/* Allpay API Docs — the page layer shared by every docs page on the design system (api-reference.htm, and the
   pages that follow it): one long page with a menu, rows of text + code, and what the bundle does not have.
   Colours, radii and fonts are design system tokens; components themselves live in allpay-docs-ds/bundle.css. */

html{scroll-behavior:smooth}
body{margin:0;background:var(--surface)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* JS-only controls disappear without JS, the content stays readable */
html:not(.ad-js) .ad-jsonly{display:none}

/* ---------- shell: navigation stays in view on a long page ---------- */
.ad-brand{color:inherit;text-decoration:none}
@media (min-width:761px){
  .ad-body{flex-wrap:nowrap}
  .ad-nav{flex:0 0 var(--layout-nav);max-width:var(--layout-nav);position:sticky;top:0;align-self:flex-start;height:100vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}
  .ad-main{flex:1 1 0}
}
.ad-nav__empty{margin:0;padding:0 10px;font-size:14px;color:var(--text-3)}
.ad-nav__group[hidden],.ad-nav__item[hidden]{display:none}
.ad-contents{position:sticky;top:0;z-index:5;color:var(--text)}
.ad-contents__k{color:var(--text-3)}
/* the arrow points up while the menu is open */
.ad-contents__arrow{display:inline-block;transition:transform 200ms}
.ad-contents[aria-expanded="true"] .ad-contents__arrow{transform:rotate(180deg)}
html:not(.ad-js) .ad-nav{display:block;max-width:none}
/* phone: the opened menu covers the page right under the Contents bar, wherever the page is scrolled;
   the page under it does not scroll (the script sets --ad-nav-top and ad-nav-locked) */
@media (max-width:760px){
  .ad-js .ad-nav.is-open{position:fixed;top:var(--ad-nav-top,48px);left:0;right:0;bottom:0;z-index:4;overflow-y:auto;overscroll-behavior:contain;padding-bottom:24px}
  html.ad-nav-locked{overflow:hidden}
}
/* narrow header: search fills the rest of the row after the buttons instead of taking a row of its own */
@media (max-width:1000px){.ad-search{flex:1 1 160px;min-width:0}}
/* phone: logo and Reader / Agent, then a forced line break, then theme, copy and search */
@media (max-width:760px){
  .ad-brand{order:1}
  .ad-segmented{order:2}
  .ad-header::after{content:"";order:3;flex-basis:100%;margin-top:-10px}
  #ad-theme{order:4}
  .ad-copy-page{order:5}
  .ad-search{order:6;flex:1 1 120px}
}
[data-theme="dark"] .ad-theme-moon,:root:not([data-theme="dark"]) .ad-theme-sun{display:none}

/* ---------- rows: article + its code panel, section after section ---------- */
.ad-page{display:block}
.ad-row{display:flex;flex-wrap:wrap;align-items:stretch;border-bottom:1px solid var(--border)}
.ad-row--wide>.ad-article{flex:1 1 100%}
.ad-row--intro>.ad-article{padding-block:32px;background:var(--surface)}
[id]{scroll-margin-top:12px}
@media (max-width:760px){[id]{scroll-margin-top:60px}}
.ad-stack{display:flex;flex-direction:column;gap:16px}
.ad-stack>*{min-width:0}
.ad-article .ad-section{margin:16px 0 8px}
.ad-article .ad-endpoint,.ad-article .ad-rules{margin-bottom:0}
.ad-eyebrow{margin-bottom:-8px}
.ad-title{margin:0}
.ad-title--section{font-size:26px}
.ad-title--section:not(:first-child):not(.ad-eyebrow + .ad-title){margin-top:24px}
.ad-title--group{font-size:24px}
.ad-hero .ad-title{margin-bottom:10px}
.ad-hero .ad-section{margin:28px 0 0}
.ad-hero .ad-lead,.ad-row--intro .ad-lead{margin:0;max-width:var(--layout-measure)}
.ad-p--caption{font-size:13px;color:var(--text-2)}
.ad-ul{margin:0;padding-inline-start:20px;max-width:var(--layout-measure);display:flex;flex-direction:column;gap:6px}
.ad-table th{white-space:nowrap}
.ad-table td.ad-mono{overflow-wrap:normal;white-space:nowrap}
/* a key (code, status, brand) is never broken in the middle of a word */
.ad-table td.ad-key{overflow-wrap:normal}
.ad-release__items p+p{margin-top:8px}
/* wide sections: text keeps the reading width of the rest of the page */
.ad-release__items,.ad-link-row>span{max-width:var(--layout-measure)}
/* phone: the date and the version of a changelog entry on one line */
@media (max-width:760px){.ad-release__when{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:center;gap:8px}.ad-release__ver{margin-top:0}}
/* a table wider than its box fades at the edge it can still be scrolled to (the page script sets the classes) */
.ad-table.is-clip-end{-webkit-mask-image:linear-gradient(to left,transparent,#000 40px);mask-image:linear-gradient(to left,transparent,#000 40px)}
.ad-table.is-clip-start{-webkit-mask-image:linear-gradient(to right,transparent,#000 40px);mask-image:linear-gradient(to right,transparent,#000 40px)}
.ad-table.is-clip-start.is-clip-end{-webkit-mask-image:linear-gradient(to right,transparent,#000 40px,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(to right,transparent,#000 40px,#000 calc(100% - 40px),transparent)}

/* ---------- integration flows: the cards fill every row, so the last one is never left alone ---------- */
.ad-flows{display:flex;flex-wrap:wrap}
.ad-flow{flex:1 1 300px;min-width:0}

/* ---------- # next to a section heading copies the link to the section (added by the page script) ---------- */
.ad-heading-anchor{display:inline-block;min-width:22px;height:22px;margin-inline-start:8px;padding:0 5px;border-radius:var(--radius-xs);background:var(--fill);color:var(--accent-text);font-size:12px;font-weight:700;letter-spacing:0;line-height:22px;text-align:center;text-decoration:none;vertical-align:middle;opacity:0;transition:opacity 100ms}
:is(h2,h3):hover>.ad-heading-anchor,.ad-heading-anchor:focus-visible,.ad-heading-anchor.is-copied{opacity:1}
@media (hover:none){.ad-heading-anchor{opacity:.55}}

/* ---------- Copy URL: a label on wide screens, an icon next to the address on a phone ---------- */
.ad-copy-url svg{display:none}
@media (max-width:760px){
  .ad-endpoint{flex-wrap:nowrap;align-items:flex-start}
  .ad-endpoint__url{flex:1 1 0;padding-top:2px}
  .ad-copy-url{flex:0 0 auto;width:32px;padding:0}
  .ad-copy-url .ad-copy-url__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .ad-copy-url .ad-copy-url__icon{display:block}
  .ad-copy-url.is-copied .ad-copy-url__icon{display:none}
  .ad-copy-url.is-copied .ad-copy-url__check{display:block}
}

/* ---------- the same code element is the panel (>1100px) and the disclosure (≤1100px) ---------- */
.ad-codepanel .ad-disclosure{display:block;margin:0;background:transparent;overflow:visible}
.ad-codepanel .ad-disclosure>summary{display:none}
.ad-codepanel .ad-disclosure__body{padding:0}
.ad-codepanel__inner{scrollbar-width:thin}
.ad-codeslot:empty{display:none}
.ad-codeslot .ad-disclosure{margin:0}
/* no JS and narrow: nothing moves the block, so the panel simply stays under the text */
@media (max-width:1100px){html:not(.ad-js) .ad-codepanel{display:block;flex-basis:100%}}

/* ---------- code tabs: every pane is in the DOM, JS only switches them ---------- */
.ad-code__head{min-height:42px}
.ad-code__tools{flex:1 1 auto;min-width:0;flex-wrap:nowrap;align-items:flex-start;justify-content:space-between}
.ad-code__tablist{display:flex;flex-wrap:wrap;gap:4px;min-width:0}
.ad-code__tab[aria-selected="true"]{background:var(--code-tab-on);color:#18181d}
.ad-code__copy{margin-inline-start:auto}
.ad-code__panelabel{padding:8px 12px 0;font-size:12px;font-weight:600;color:var(--code-muted)}
.ad-js .ad-code__panelabel{display:none}
.ad-js .ad-code__pane:not(.is-active):not([hidden]){display:none}
.ad-code__line{min-height:1.7em}
/* the name of a code block in the panel (Request Example, Responses…) */
.ad-codepanel__title{margin:20px 0 8px}
.ad-codepanel__title:first-child{margin-top:0}
.ad-codepanel__title+.ad-code{margin-top:0}
/* without JS the code has no line numbers: only a margin */
html:not(.ad-js) .ad-code__body pre{padding:0 16px}
.ad-code :focus-visible{outline-offset:-2px}

/* ---------- field list ---------- */
.ad-fields{min-width:0}
.ad-field__name sup{font-size:.75em;line-height:0;color:var(--err-fg)}
.ad-badge--opt{color:var(--text-3);background:var(--fill)}
.ad-chip--default{box-shadow:inset 0 0 0 1px var(--accent-text)}
.ad-value{flex-wrap:wrap}
.ad-value .ad-chip{overflow-wrap:anywhere}
.ad-value__m{min-width:0;flex:1 1 200px}

/* ---------- worked example ---------- */
.ad-details{border:1px solid var(--border);border-radius:var(--radius-md)}
.ad-details>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:0 14px;font-weight:600;list-style:none;cursor:pointer}
.ad-details>summary::-webkit-details-marker{display:none}
.ad-details>summary svg{transition:transform 200ms;color:var(--text-3)}
.ad-details[open]>summary svg{transform:rotate(180deg)}
.ad-details__body{display:flex;flex-direction:column;gap:8px;padding:0 14px 14px}
.ad-pre__note{color:var(--text-3)}
/* the block's summary is already the title of the calculator */
.ad-details .ad-tool__title{display:none}

/* ---------- changelog: older entries open in steps, like in the original ---------- */
.ad-releases{display:flex;flex-direction:column;min-width:0}
/* a closed entry takes no room: hidden="until-found" keeps it in the page for Ctrl+F */
.ad-releases>.ad-release[hidden]{margin:0}
.ad-releases>.ad-older{margin-top:28px;width:100%}
.ad-link-row span a{flex:none;font-weight:400}

/* ---------- agent view ---------- */
.ad-agent{padding:36px clamp(20px,3vw,48px) 64px;background:var(--card)}
.ad-agent__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
.ad-agent .ad-hint{margin:0}

/* ---------- long words never push the page sideways ---------- */
.ad-article,.ad-p,.ad-lead,.ad-callout,.ad-field__desc{overflow-wrap:anywhere}
.ad-callout>div{min-width:0}
@media (max-width:760px){.ad-field__head{flex:1 1 100%}}