/* docs.socialmatterspay.com — the "inside" surface of identity v1: paper over the iron-filing field,
   Zilla Slab text, Martian Mono code, ink code blocks, the payment line as the signature. Radius 0, no shadows. */
@font-face { font-family: 'Zilla Slab'; font-weight: 400; src: url('/assets/fonts/ZillaSlab-400.woff2') format('woff2'); font-display: swap }
@font-face { font-family: 'Zilla Slab'; font-weight: 600; src: url('/assets/fonts/ZillaSlab-600.woff2') format('woff2'); font-display: swap }
@font-face { font-family: 'Martian Mono'; font-weight: 400; src: url('/assets/fonts/MartianMono-400.woff2') format('woff2'); font-display: swap }
@font-face { font-family: 'Martian Mono'; font-weight: 500; src: url('/assets/fonts/MartianMono-500.woff2') format('woff2'); font-display: swap }

:root {
  color-scheme: light;
  --ink: #0A0A0B; --paper: #F2EEE3; --chartreuse: #B4BD00; --steel: #B9BCC0;
  --muted: #5E5A52; --line: #D6D0C2; --code-bg: #0A0A0B; --code-fg: #E8E4D8; --code-dim: #A39E92;
  --ok: #007066; --progress: #2D4E86; --warn: #965000; --stop: #C0103F;
  --text: 'Zilla Slab', Rockwell, 'Roboto Slab', Georgia, serif;
  --mono: 'Martian Mono', ui-monospace, Menlo, Consolas, monospace;
  --gutter: clamp(16px, 4vw, 48px);
}
* { box-sizing: border-box }
html { scroll-padding-top: 20px; -webkit-text-size-adjust: 100% }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.6 var(--text) }
a { color: var(--ink); text-underline-offset: 3px; text-decoration-thickness: 1px }
a:hover { text-decoration-thickness: 2px }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible, pre:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px }
code, pre, .mono { font-family: var(--mono) }
p code, li code, td code, h3 code, .note code, figcaption code { font-size: .78em; letter-spacing: -.01em; overflow-wrap: anywhere }
img, svg { max-width: 100% }

.skip { position: absolute; left: 8px; top: -60px; background: var(--ink); color: var(--paper); padding: 10px 14px; z-index: 10; text-decoration: none }
.skip:focus { top: 8px }

/* draft rail */
.draft { background: var(--ink); color: var(--paper); padding: 10px var(--gutter); display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-size: 15px; line-height: 1.45 }
.draft b { font: 500 12px var(--mono); letter-spacing: .12em; background: var(--chartreuse); color: var(--ink); padding: 5px 9px }
.draft a { color: var(--paper) }
.draft .short { display: none }

/* header band on the field */
.band { position: relative; border-bottom: 1px solid var(--line); min-height: 300px; display: flex; align-items: stretch; overflow: hidden; background: var(--paper) }
.band--wide { min-height: min(62vh, 640px) }
.band__bg { position: absolute; inset: 0 }
.band__bg .smp-field { position: relative; width: 100%; height: 100% }
.smp-field__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; display: block }
.lede { position: relative; z-index: 1; width: min(40%, 620px); padding: 30px 0 30px var(--gutter); display: grid; gap: 14px; align-content: center }
.band--wide .lede { width: min(40%, 640px) }
.lockup { width: min(280px, 100%); height: auto; display: block; color: var(--ink) }
.lockup .icon { color: var(--ink) }
.home-link { display: inline-flex; align-items: center; min-height: 44px; justify-self: start; text-decoration: none; line-height: 0 }
.eyebrow { font: 500 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 6px 0 0 }
.band h1 { margin: 0; font-size: clamp(32px, 3.4vw, 46px); line-height: 1.06; font-weight: 600; text-wrap: balance }
.band p.sum { margin: 0; color: var(--ink); max-width: 46ch; font-size: 18px }
.hosts { display: grid; gap: 6px; margin-top: 4px }
.hosts div { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 10px; align-items: baseline; font-size: 14px }
.hosts span { color: var(--muted) }
.actions { margin: 6px 0 0 }
.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; background: var(--chartreuse); color: var(--ink); border: 2px solid var(--ink); font: 600 17px var(--text); text-decoration: none }
.btn:hover { text-decoration: underline; text-decoration-thickness: 2px }
.btn:active { transform: scale(.97); transition: transform 120ms }
.hosts code { font-size: 13px; overflow-wrap: anywhere; background: rgba(242, 238, 227, .92); padding: 2px 6px; border: 1px solid var(--line) }

/* layout */
.wrap { display: grid; grid-template-columns: 252px minmax(0, 1fr); gap: 48px; padding: 0 var(--gutter) 72px }
nav.side { position: sticky; top: 0; align-self: start; padding-top: 26px; max-height: 100vh; overflow: auto; overscroll-behavior: contain }
nav.side summary { display: none }
nav.side label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px }
nav.side input { width: 100%; font: 15px var(--text); padding: 9px 11px; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); min-height: 44px; border-radius: 0 }
nav.side h2 { font: 500 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 22px 0 6px; padding-left: 10px }
nav.side ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px }
nav.side li a { display: flex; justify-content: flex-start; gap: 10px; padding: 8px 10px; text-decoration: none; border-left: 2px solid transparent; min-height: 40px; align-items: center; font-size: 16px; line-height: 1.25 }
nav.side li a:hover { border-left-color: var(--ink); background: rgba(10, 10, 11, .04) }
nav.side li a[aria-current="page"] { border-left: 4px solid var(--ink); font-weight: 600; background: rgba(10, 10, 11, .05) }
nav.side li a .n { font: 400 12px var(--mono); color: var(--muted); flex: none; width: 2.6em; text-align: right; margin-left: -8px }
nav.side .none { font-size: 14px; color: var(--muted); padding: 10px }
main { min-width: 0; padding-top: 26px }
main.guide { max-width: 76ch }
main.ref { max-width: 1240px }

section { padding-block: 22px 26px; border-bottom: 1px solid var(--line) }
section:last-child { border-bottom: 0 }
h2 { font-size: 30px; line-height: 1.15; margin: 0 0 12px; font-weight: 600; text-wrap: balance }
h3 { font-size: 20px; margin: 26px 0 8px; font-weight: 600; line-height: 1.25 }
h4 { font: 500 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 22px 0 8px }
p, li { max-width: 72ch }
ul, ol { padding-left: 22px }
li + li { margin-top: 4px }
.note { font-size: 15px; color: var(--muted) }
.note a, td a { display: inline-flex; align-items: center; min-height: 40px; gap: 6px }
.rule { border-left: 3px solid var(--ink); padding: 2px 0 2px 16px; margin: 16px 0 }
.rule p { margin: 6px 0 }

/* tables */
.tw { overflow-x: auto; margin: 10px 0 8px }
table { border-collapse: collapse; width: 100%; font-size: 15px; line-height: 1.45 }
caption { text-align: left; font-size: 13px; color: var(--muted); padding-bottom: 6px }
th, td { text-align: left; vertical-align: top; padding: 9px 14px 9px 0; border-top: 1px solid var(--line) }
th { font-size: 13px; color: var(--muted); font-weight: 600; border-top: 0 }
td code { white-space: nowrap }
table.fields td:first-child { width: 38%; padding-right: 18px }
table.fields td:first-child code { white-space: normal; overflow-wrap: normal; word-break: normal }
table.fields .t { display: block; font: 400 12px/1.5 var(--mono); color: var(--muted); margin-top: 2px; overflow-wrap: anywhere }
table.fields td:last-child code { white-space: normal }
/* child fields fold under their field (round 8): a 44 px toggle, then the same table one level in */
details.kids { margin-top: 4px }
details.kids > summary { list-style: none; cursor: pointer; display: flex; align-items: center; min-height: 44px; font: 500 13px/1.4 var(--mono); color: var(--ink) }
details.kids > summary::-webkit-details-marker { display: none }
details.kids > summary::before { content: '+'; display: inline-block; width: 1.2em }
details.kids[open] > summary::before { content: '\2212' }
details.kids > summary:hover { text-decoration: underline; text-underline-offset: 3px }
table.fields.kids { margin: 2px 0 6px; border-left: 2px solid var(--line) }
table.fields.kids td:first-child { padding-left: 12px }
.req { font: 500 12px var(--mono); letter-spacing: .06em; color: var(--stop); margin-left: 4px }

/* code */
.block { position: relative; margin: 10px 0 16px; background: var(--code-bg); color: var(--code-fg); min-width: 0 }
.block .bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 4px 4px 4px 14px; border-bottom: 1px solid #23221F; font: 400 12px var(--mono); color: var(--code-dim) }
.block .bar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.block button { font: 500 12px var(--mono); background: transparent; color: var(--code-fg); border: 1px solid #3A3833; padding: 0 12px; min-height: 40px; min-width: 64px; cursor: pointer; border-radius: 0; flex: none }
.block button:hover { border-color: var(--chartreuse); color: var(--chartreuse) }
pre { margin: 0; padding: 14px; overflow-x: auto; font-size: 13px; line-height: 1.65; tab-size: 2 }
pre .k { color: var(--chartreuse) } pre .c { color: var(--code-dim) }

/* the line */
/* the horizontal line's smallest text is 11.5 of its 700 units: under 731 px wide it would draw below 12 px, so the
   vertical line is drawn instead, by the figure's own width (a window between 1000 and 1180 px drew 10.2 px labels) */
.line { margin: 14px 0 6px; container-type: inline-size }
.line svg { width: 100%; height: auto; display: block }
.line .ln-v { display: none }
.line a:hover text { text-decoration: underline }
.line figcaption { font-size: 14px; color: var(--muted); margin-top: 6px }
@container (max-width: 730px) { .line .ln-h { display: none } .line .ln-v { display: block; max-width: 340px } }

/* pills + method tags */
.pill { display: inline-flex; align-items: center; gap: 6px; font: 500 12px var(--mono); padding: 3px 8px; border: 1.5px solid currentColor; white-space: nowrap; line-height: 1.5 }
.pill svg { width: 12px; height: 12px; flex: none }
.p-ok { color: var(--ok) } .p-pr { color: var(--progress) } .p-wa { color: var(--warn); border-style: dashed }
.p-st { color: var(--paper); background: var(--stop); border-color: var(--stop) }
.p-ne { color: var(--muted) } .p-in { color: var(--paper); background: var(--ink); border-color: var(--ink) }
.m { display: inline-block; font: 500 12px var(--mono); letter-spacing: .08em; background: var(--ink); color: var(--chartreuse); padding: 5px 8px; line-height: 1.3; min-width: 4.4em; text-align: center }
.m-delete { background: var(--paper); color: var(--stop); outline: 1.5px solid var(--stop); outline-offset: -1.5px }
/* a preflight is sent by the browser, not by you: dashed and quiet */
.m-options { background: var(--paper); color: var(--muted); outline: 1.5px dashed var(--muted); outline-offset: -1.5px }

/* the real drop-in button, drawn by smp.js on both grounds it supports */
.smpjs-demo { margin: 14px 0 18px }
.smpjs-demo__grounds { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--ink) }
.smpjs-demo__light, .smpjs-demo__dark { padding: 28px 24px 22px; min-height: 150px }
.smpjs-demo__light { background: var(--paper) }
.smpjs-demo__dark { background: var(--ink) }
.smpjs-demo figcaption { font-size: 14px; color: var(--muted); margin-top: 8px }

/* reference operations: each one folds, and the folds are the page's index (DESIGN-CONTRACT, round 7) */
.ops { border-bottom: 1px solid var(--line) }
.op { border-top: 1px solid var(--line) }
.op-fold > summary { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) 1.4em; gap: 4px 14px; align-items: center; padding: 12px 0; min-height: 44px; cursor: pointer }
.op-fold > summary::-webkit-details-marker { display: none }
.op-fold > summary::after { content: '+'; font: 500 18px var(--mono); grid-column: 2; grid-row: 1 / span 2; justify-self: end }
.op-fold[open] > summary::after { content: '−' }
.op-head .ep { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0; grid-column: 1 }
.op-head .ep code { font-size: 14px; overflow-wrap: anywhere }
.op-head h2 { grid-column: 1; margin: 0; font-size: 19px; line-height: 1.3 }
.op-fold > summary:hover h2 { text-decoration: underline; text-underline-offset: 3px }
.op-fold[open] > summary h2 { font-size: 24px }
/* a folded row shows two lines of its summary; open, the whole of it (screen readers always read all of it) */
.op-fold:not([open]) > summary h2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.op-open { padding: 0 0 30px }
.badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px }
.host { font-size: 14px; color: var(--muted); margin: 6px 0 0 }
.host code { color: var(--ink) }
.op-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 40px }
.op-ex summary { font: 500 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 22px 0 8px; min-height: 40px; display: flex; align-items: center; cursor: pointer }
.sample { margin: 0 0 18px }
.sample > p { margin: 0 0 4px; font-size: 15px; font-weight: 600 }
.resp-table td:first-child { white-space: nowrap }

/* a guide's example response, folded behind one line */
details.resp > summary { list-style: none; font: 500 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); min-height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); cursor: pointer }
details.resp > summary::-webkit-details-marker { display: none }
details.resp > summary::after { content: '+'; font: 500 18px var(--mono); color: var(--ink) }
details.resp[open] > summary::after { content: '−' }

/* overview */
.start { list-style: none; padding: 0; margin: 8px 0; counter-reset: s }
.start li { counter-increment: s; display: grid; grid-template-columns: 3.2em minmax(0, 1fr); gap: 8px; padding: 12px 0; border-top: 1px solid var(--line); max-width: none }
.start li::before { content: counter(s, decimal-leading-zero); font: 500 13px var(--mono); color: var(--muted); padding-top: 4px }
.start a { display: inline-flex; align-items: center; min-height: 40px; font-size: 19px; font-weight: 600; text-decoration: none }
.start a:hover { text-decoration: underline }
.start p { margin: 2px 0 0; color: var(--muted); font-size: 15px }
.steps { list-style: none; padding: 0; margin: 0; counter-reset: q }
.steps > li { counter-increment: q; border-top: 1px solid var(--line); padding: 20px 0 6px; max-width: none }
.steps > li > h3 { margin-top: 0; display: flex; gap: 12px; align-items: baseline }
.steps > li > h3::before { content: counter(q); font: 500 13px var(--mono); background: var(--ink); color: var(--chartreuse); min-width: 28px; height: 28px; display: inline-grid; place-items: center }

footer { padding: 26px var(--gutter) 36px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap }
footer a { color: var(--muted); display: inline-flex; align-items: center; min-height: 40px }

@media (min-width: 1280px) {
  .op-body.has-ex { grid-template-columns: minmax(0, 1fr) minmax(0, 460px) }
  .op-ex { position: sticky; top: 12px; align-self: start; max-height: calc(100vh - 24px); overflow: auto }
}
@media (max-width: 999px) {
  .band, .band--wide { display: block; min-height: 0 }
  .band__bg { position: relative; height: 170px; inset: auto }
  .band--wide .band__bg { height: 220px }
  .lede, .band--wide .lede { width: auto; padding: 22px var(--gutter) 26px }
  .wrap { grid-template-columns: minmax(0, 1fr); gap: 0 }
  nav.side { position: static; max-height: none; padding-top: 16px }
  nav.side summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 12px; border: 1px solid var(--ink); font-weight: 600; cursor: pointer; list-style: none }
  nav.side summary::-webkit-details-marker { display: none }
  nav.side summary::after { content: '+'; font: 500 18px var(--mono) }
  nav.side details[open] summary::after { content: '−' }
  nav.side details[open] .navbody { padding-top: 12px }
}
@media (max-width: 640px) {
  .smpjs-demo__grounds { grid-template-columns: 1fr }
  .draft .long { display: none }
  .draft .short { display: inline }
  table.fields thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0) }
  table.fields, table.fields tbody, table.fields tr, table.fields td { display: block; width: auto }
  table.fields tr { border-top: 1px solid var(--line); padding: 10px 0 }
  table.fields td, table.fields td:first-child { border: 0; padding: 2px 0; width: auto }
  table.fields td.none { display: none }
  table.fields .t { display: inline; margin: 0 0 0 8px }
  td code { white-space: normal; overflow-wrap: anywhere }
  /* the return-code table stacks like the field tables: code, meaning, category, then what to do at the full width (round 9) */
  table.codes thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0) }
  table.codes, table.codes caption, table.codes tbody, table.codes tr { display: block; width: auto }
  table.codes tr { border-top: 1px solid var(--line); padding: 10px 0 }
  table.codes td { display: inline; border: 0; padding: 0 8px 0 0 }
  table.codes td:last-child { display: block; padding: 4px 0 0 }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth } }