/* ============================================================================
   RPACPC — Individual API pages (kyc/*.html and future suite folders).
   Loaded after styles.css + suite.css + suite-detail.css. Accent comes from
   the body's --acc / --acc-tint / --acc-strong (the parent suite's colour).
   Behaviour (sample simulator, copy buttons, JSON colouring): js/api-page.js
   ============================================================================ */

/* -- Hero ------------------------------------------------------------------------ */
.shero h1 .h1-kicker { display: block; margin-bottom: 16px; font-family: var(--f-mono); font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; line-height: 1.4; color: var(--acc); }

/* -- Sample verification card (hero, right column) ------------------------------ */
.apx-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-lg); overflow: hidden; }
.apx-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.apx-title { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--acc-strong); }
.apx-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green-strong); animation: apxPulse 1.8s infinite; }
@keyframes apxPulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green-strong) 55%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.apx-note { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .04em; color: var(--muted); border: 1px solid var(--line); border-radius: 20px; padding: 3px 9px; background: var(--surface); }

/* Input phase (step, label, input) and output (.apx-out) share one grid cell
   area so the card keeps a stable height while the sample replays. */
.apx-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; padding: 22px 22px 24px; }
.apx-stage > .apx-step { grid-row: 1; grid-column: 1; }
.apx-stage > .apx-label { grid-row: 2; grid-column: 1; }
.apx-stage > .apx-input { grid-row: 3; grid-column: 1; }
.apx-stage > .apx-out { grid-row: 1 / 5; grid-column: 1; }
.apx-stage > .apx-step, .apx-stage > .apx-label, .apx-stage > .apx-input { transition: opacity .3s ease, transform .3s ease; }
.apx-out { transition: opacity .35s ease, transform .35s ease; }
/* Without JS (or before it starts) the result is shown. */
.apx-card:not(.is-live) .apx-stage > .apx-step,
.apx-card:not(.is-live) .apx-stage > .apx-label,
.apx-card:not(.is-live) .apx-stage > .apx-input,
.apx-card.is-done .apx-stage > .apx-step,
.apx-card.is-done .apx-stage > .apx-label,
.apx-card.is-done .apx-stage > .apx-input { opacity: 0; transform: translateY(-8px); pointer-events: none; }
.apx-card.is-live:not(.is-done) .apx-out { opacity: 0; transform: translateY(8px); pointer-events: none; }

.apx-step { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.apx-step .num { width: 19px; height: 19px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--acc-tint); color: var(--acc-strong); font-size: 11px; font-weight: 700; letter-spacing: 0; }
.apx-label { display: block; margin-bottom: 7px; font-size: 12px; font-weight: 600; color: var(--ink); }
.apx-input { display: flex; align-items: center; min-height: 52px; padding: 0 15px; background: #fff; border: 1.5px solid var(--line); border-radius: 11px; font-family: var(--f-mono); font-size: 17px; letter-spacing: .04em; color: var(--ink); overflow: hidden; white-space: nowrap; transition: border-color .2s, box-shadow .2s; }
.apx-card.is-typing .apx-input { border-color: var(--acc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 13%, transparent); }
.apx-caret { display: inline-block; width: 2px; height: 21px; margin-left: 2px; background: var(--acc); opacity: 0; }
.apx-card.is-typing .apx-caret { animation: apxBlink .9s steps(1) infinite; }
@keyframes apxBlink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }

.apx-flow { position: absolute; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .72); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.apx-card.is-checking:not(.is-done) .apx-flow { opacity: 1; pointer-events: auto; }
.apx-flowbadge { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 30px; box-shadow: var(--shadow-md); font-family: var(--f-mono); font-size: 12px; color: var(--body); white-space: nowrap; }
.apx-spin { width: 15px; height: 15px; border-radius: 50%; border: 2.5px solid color-mix(in srgb, var(--acc) 28%, transparent); border-top-color: var(--acc); animation: apxSpin .7s linear infinite; }
@keyframes apxSpin { to { transform: rotate(360deg); } }

.apx-status { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding: 13px 14px; border-radius: 12px; background: var(--green-tint); }
.apx-check { width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--green-strong); color: #fff; }
.apx-check svg { width: 16px; height: 16px; }
.apx-status b { display: block; font-family: var(--f-mono); font-size: 13px; letter-spacing: .02em; color: var(--green-strong); }
.apx-status .sub { display: block; margin-top: 1px; font-size: 12px; color: var(--body); }

.apx-tbl { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.apx-row { display: flex; align-items: baseline; gap: 14px; padding: 11px 14px; border-bottom: 1px solid var(--line-2); }
.apx-row:last-child { border-bottom: none; }
.apx-row .k { flex: 0 0 38%; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.apx-row .v { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--ink); text-align: right; overflow-wrap: anywhere; }
.apx-card.is-done .apx-row { animation: apxRowIn .42s ease both; }
.apx-card.is-done .apx-row:nth-child(2) { animation-delay: .06s; }
.apx-card.is-done .apx-row:nth-child(3) { animation-delay: .12s; }
.apx-card.is-done .apx-row:nth-child(4) { animation-delay: .18s; }
.apx-card.is-done .apx-row:nth-child(5) { animation-delay: .24s; }
.apx-card.is-done .apx-row:nth-child(6) { animation-delay: .30s; }
.apx-card.is-done .apx-row:nth-child(7) { animation-delay: .36s; }
@keyframes apxRowIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Side-by-side hero: the card matches the copy column's height, and the result
   table grows to fill it so there is no empty band under the rows. */
@media (min-width: 1081px) {
  .shero-grid > .apx-card { align-self: stretch; display: flex; flex-direction: column; }
  .shero-grid > .apx-card .apx-stage { flex: 1; }
  .shero-grid > .apx-card .apx-out { display: flex; flex-direction: column; }
  .shero-grid > .apx-card .apx-tbl { flex: 1; display: flex; flex-direction: column; }
  .shero-grid > .apx-card .apx-row { flex: 1; align-items: center; }
}

/* -- Overview: meta list + "part of" chip ---------------------------------------- */
.apx-meta { display: grid; margin-top: 26px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface); box-shadow: var(--shadow-sm); }
.apx-meta > div { display: flex; align-items: baseline; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--line-2); }
.apx-meta > div:last-child { border-bottom: none; }
.apx-meta .k { flex: 0 0 34%; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.apx-meta .v { font-size: 14.5px; font-weight: 600; line-height: 1.45; color: var(--ink); }
.apx-meta a.v { color: var(--acc); text-decoration: none; }
.apx-meta a.v:hover { text-decoration: underline; }

.apx-partof { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.apx-partof .k { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.apx-partof a { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border: 1px solid var(--line); border-radius: 30px; background: var(--surface); font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none; transition: border-color .15s; }
.apx-partof a:hover { border-color: var(--acc); }
.apx-partof .code { padding: 4px 9px; border-radius: 20px; background: var(--acc); color: #fff; font-family: var(--f-mono); font-size: 11px; font-weight: 600; letter-spacing: .04em; }

/* -- Key information grid --------------------------------------------------------- */
.apx-info { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.apx-info.n4 { grid-template-columns: repeat(4, 1fr); }
.apx-callout { display: flex; align-items: flex-start; gap: 12px; margin-top: 22px; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--acc) 22%, var(--line)); border-radius: 12px; background: var(--acc-tint); font-size: 14px; line-height: 1.55; color: var(--body); }
.apx-callout svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; color: var(--acc); }

/* -- 4-step flow + 4-up related grid (modifiers on suite-detail / suite grids) ---- */
.kx-flow.n4 { grid-template-columns: repeat(4, 1fr); }
.srel-grid.n4 { grid-template-columns: repeat(4, 1fr); }
.apx-relcta { display: flex; justify-content: center; margin-top: 30px; }

/* -- API request / response ---------------------------------------------------------- */
.apx-split { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 48px; align-items: start; }
.apx-split.rev > :first-child { order: 2; }
.apx-split .section-head { margin-bottom: 26px; }
.apx-stepno { display: block; width: max-content; margin-bottom: 14px; padding: 5px 11px; border-radius: 20px; background: var(--acc-tint); color: var(--acc-strong); font-family: var(--f-mono); font-size: 12px; font-weight: 600; letter-spacing: .04em; line-height: 1.3; }
.apx-subhead { margin: 26px 0 12px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.apx-split .section-head + .apx-subhead { margin-top: 0; }
.apx-stack { display: flex; flex-direction: column; gap: 16px; }

.apx-params { width: 100%; border-collapse: collapse; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface); box-shadow: var(--shadow-sm); }
.apx-params thead th { padding: 13px 18px; background: var(--surface-2); border-bottom: 1px solid var(--line); text-align: left; font-family: var(--f-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.apx-params tbody td { padding: 14px 18px; border-bottom: 1px solid var(--line-2); vertical-align: top; font-size: 14px; line-height: 1.5; color: var(--body); }
.apx-params tbody tr:last-child td { border-bottom: none; }
.apx-params .f { font-family: var(--f-mono); font-size: 13px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.apx-params .t { font-family: var(--f-mono); font-size: 12px; color: var(--acc); }

.apx-code { display: flex; flex-direction: column; min-width: 0; background: var(--ink); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-lg); }
.apx-code .bar { display: flex; align-items: center; gap: 10px; padding: 11px 14px 11px 16px; border-bottom: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .03); }
.apx-code .bar .title { font-family: var(--f-mono); font-size: 12px; color: var(--d-muted); }
.apx-code .bar .tag { margin-left: auto; padding: 4px 9px; border-radius: 20px; font-family: var(--f-mono); font-size: 10.5px; font-weight: 500; }
.apx-code .bar .tag.req { color: #7E9BFF; background: rgba(126, 155, 255, .14); }
.apx-code .bar .tag.res { color: var(--green); background: rgba(54, 169, 104, .14); }
.apx-copy { padding: 4px 10px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 7px; background: transparent; color: var(--d-muted); font-family: var(--f-mono); font-size: 11px; cursor: pointer; transition: color .15s, border-color .15s; }
.apx-copy:hover, .apx-copy.is-copied { color: #fff; border-color: rgba(255, 255, 255, .4); }
.apx-code pre { margin: 0; padding: 18px 20px; max-height: 780px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--f-mono); font-size: 12.5px; line-height: 1.7; color: #C7D3F5; }
.apx-code code { font-family: inherit; font-size: inherit; color: inherit; background: none; padding: 0; }
.apx-code .j-key { color: #8FE3C2; }
.apx-code .j-str { color: #E7C893; }
.apx-code .j-num { color: #C9A0FF; }
.apx-code .j-bool, .apx-code .j-null { color: #7E9BFF; }
.apx-code .j-punc { color: #6E7BA8; }

.apx-fine { display: flex; align-items: flex-start; gap: 8px; margin-top: 14px; font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.apx-fine svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; }

/* -- Use cases (5 cards: 3 + 2) ------------------------------------------------------ */
.apx-grid5 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.apx-grid5 > * { grid-column: span 2; }
.apx-grid5 > :nth-child(4):nth-last-child(2), .apx-grid5 > :nth-child(5):last-child { grid-column: span 3; }

/* -- Why RPACPC list ------------------------------------------------------------------ */
.apx-why { display: flex; flex-direction: column; }
.apx-why-row { display: flex; gap: 18px; padding: 20px 0; border-top: 1px solid var(--line-2); }
.apx-why-row:first-child { border-top: none; padding-top: 0; }
.apx-why-row .sben-ico { flex-shrink: 0; margin-bottom: 0; }
.apx-why-row h3 { font-size: 17px; letter-spacing: -.01em; margin-bottom: 5px; }
.apx-why-row p { font-size: 14.5px; line-height: 1.6; color: var(--body); }

/* -- Responsive -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .apx-split { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .apx-split.rev > :first-child { order: 0; }
  .apx-info, .apx-info.n4, .srel-grid.n4, .kx-flow.n4 { grid-template-columns: repeat(2, 1fr); }
  .kx-flow.n4 .kx-step::after { display: none; }
  .apx-grid5 { grid-template-columns: repeat(2, 1fr); }
  .apx-grid5 > *, .apx-grid5 > :nth-child(4):nth-last-child(2) { grid-column: span 1; }
  .apx-grid5 > :nth-child(5):last-child { grid-column: span 2; }
}
@media (max-width: 620px) {
  .apx-info, .apx-info.n4, .srel-grid.n4, .kx-flow.n4, .apx-grid5 { grid-template-columns: minmax(0, 1fr); }
  .apx-grid5 > :nth-child(5):last-child { grid-column: span 1; }
  .apx-meta > div { flex-direction: column; gap: 4px; }
  .apx-params thead { display: none; }
  .apx-params tbody tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--line-2); }
  .apx-params tbody tr:last-child { border-bottom: none; }
  .apx-params tbody td { display: block; padding: 4px 16px; border: none; }
  .apx-row .k { flex-basis: 42%; }
}

@media (prefers-reduced-motion: reduce) {
  .apx-dot, .apx-caret, .apx-spin { animation: none !important; }
  .apx-card.is-done .apx-row { animation: none; }
}