/**
 * AI/developer-docs recipes: prompt_showcase / model_comparison / integration_marketplace /
 * sdk_quickstart / webhook_events_table. apb-rx-* tokens only; brand derives from --apb-rx-brand + scheme.
 * Rendered by trait-apb-component-render-aidev.php. sdk_quickstart tabs are CSS-only (:checked radios);
 * prompt_showcase copy + integration_marketplace search/filter render fail-open static (JS wired later).
 */

/* ---------- prompt showcase ---------- */
.apb-rx-ps{padding:clamp(44px,7vw,80px) 24px}
.apb-rx-ps-inner{max-width:840px;margin:0 auto}
.apb-rx-ps-head{text-align:center;max-width:520px;margin:0 auto 24px}
.apb-rx-ps-head h3{font-size:clamp(22px,3.4vw,30px);font-weight:780;letter-spacing:-.02em;color:var(--apb-rx-ink);margin:0 0 8px}
.apb-rx-ps-head p{font-size:16px;color:var(--apb-rx-muted);margin:0}
.apb-rx-ps-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.apb-rx-ps-card{display:flex;flex-direction:column;background:var(--apb-rx-surface,#fff);border:1px solid var(--apb-rx-line);border-radius:var(--apb-rx-radius,16px);padding:18px;box-shadow:var(--apb-rx-shadow-1,0 1px 2px rgba(11,13,18,.06))}
.apb-rx-ps-cat{align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--apb-rx-brand);background:color-mix(in srgb,var(--apb-rx-brand) 9%,var(--apb-rx-surface,#fff));border:1px solid color-mix(in srgb,var(--apb-rx-brand) 20%,transparent);border-radius:999px;padding:4px 10px;margin-bottom:12px}
.apb-rx-ps-text{flex:1;font-size:14px;line-height:1.6;color:var(--apb-rx-ink);margin:0 0 14px;font-family:ui-monospace,Menlo,monospace;overflow-wrap:anywhere}
.apb-rx-ps-copy{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;color:var(--apb-rx-muted);background:var(--apb-rx-soft);border:1px solid var(--apb-rx-line);border-radius:8px;padding:7px 12px;transition:color var(--apb-rx-t,.28s) var(--apb-rx-ease)}
.apb-rx-ps-copy:hover{color:var(--apb-rx-ink)}
.apb-rx-ps-copy.done{color:var(--apb-rx-brand);border-color:color-mix(in srgb,var(--apb-rx-brand) 40%,var(--apb-rx-line))}
@media(max-width:600px){.apb-rx-ps-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.apb-rx-ps-copy{transition:none}}

/* ---------- model comparison ---------- */
.apb-rx-mdc{padding:clamp(44px,7vw,80px) 24px}
.apb-rx-mdc-inner{max-width:760px;margin:0 auto}
.apb-rx-mdc-head{text-align:center;max-width:500px;margin:0 auto 24px}
.apb-rx-mdc-head h3{font-size:clamp(22px,3.4vw,30px);font-weight:780;letter-spacing:-.02em;color:var(--apb-rx-ink);margin:0 0 8px}
.apb-rx-mdc-head p{font-size:16px;color:var(--apb-rx-muted);margin:0}
.apb-rx-mdc-table{border:1px solid var(--apb-rx-line);border-radius:var(--apb-rx-radius,16px);overflow:auto;background:var(--apb-rx-surface,#fff);box-shadow:var(--apb-rx-shadow-1,0 1px 2px rgba(11,13,18,.06))}
.apb-rx-mdc-t{width:100%;border-collapse:collapse;font-size:14px}
.apb-rx-mdc-t th,.apb-rx-mdc-t td{padding:14px 16px;text-align:right;white-space:nowrap}
.apb-rx-mdc-t th:first-child,.apb-rx-mdc-t td:first-child{text-align:left;font-weight:600;color:var(--apb-rx-ink);white-space:normal}
.apb-rx-mdc-t thead th{background:var(--apb-rx-soft);font-size:14px;font-weight:750;color:var(--apb-rx-ink);border-bottom:1px solid var(--apb-rx-line)}
.apb-rx-mdc-t thead th small{display:block;font-size:11.5px;font-weight:600;color:var(--apb-rx-muted);margin-top:2px}
.apb-rx-mdc-t tbody td{border-top:1px solid var(--apb-rx-line);color:var(--apb-rx-muted);font-variant-numeric:tabular-nums}
.apb-rx-mdc-t .rec{background:color-mix(in srgb,var(--apb-rx-brand) 6%,var(--apb-rx-surface,#fff))}
.apb-rx-mdc-t thead .rec{background:color-mix(in srgb,var(--apb-rx-brand) 12%,var(--apb-rx-surface,#fff));color:var(--apb-rx-brand)}
.apb-rx-mdc-t tbody .rec{color:var(--apb-rx-ink)}
.apb-rx-mdc-yes{color:var(--apb-rx-brand)}
.apb-rx-mdc-no{color:color-mix(in srgb,var(--apb-rx-ink) 24%,transparent)}

/* ---------- integration marketplace ---------- */
.apb-rx-im{padding:clamp(44px,7vw,80px) 24px}
.apb-rx-im-inner{max-width:860px;margin:0 auto}
.apb-rx-im-head{text-align:center;max-width:520px;margin:0 auto 22px}
.apb-rx-im-head h3{font-size:clamp(22px,3.4vw,30px);font-weight:780;letter-spacing:-.02em;color:var(--apb-rx-ink);margin:0 0 8px}
.apb-rx-im-head p{font-size:16px;color:var(--apb-rx-muted);margin:0}
.apb-rx-im-search{display:flex;align-items:center;gap:10px;max-width:420px;margin:0 auto 16px;background:var(--apb-rx-surface,#fff);border:1px solid var(--apb-rx-line);border-radius:var(--apb-rx-radius-pill,999px);padding:11px 18px}
.apb-rx-im-search svg{color:var(--apb-rx-muted);flex:0 0 auto}
.apb-rx-im-search input{flex:1;border:0;outline:0;background:transparent;font:inherit;font-size:15px;color:var(--apb-rx-ink)}
.apb-rx-im-cats{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:22px}
.apb-rx-im-cat{font:inherit;font-size:13px;font-weight:600;cursor:pointer;color:var(--apb-rx-ink);background:var(--apb-rx-surface,#fff);border:1px solid var(--apb-rx-line);border-radius:var(--apb-rx-radius-pill,999px);padding:8px 15px}
.apb-rx-im-cat.on{color:var(--apb-rx-accent-contrast,#fff);background:var(--apb-rx-brand);border-color:var(--apb-rx-brand)}
.apb-rx-im-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.apb-rx-im-card{display:flex;gap:12px;align-items:center;background:var(--apb-rx-surface,#fff);border:1px solid var(--apb-rx-line);border-radius:var(--apb-rx-radius,14px);padding:16px;text-decoration:none;transition:border-color var(--apb-rx-t,.28s) var(--apb-rx-ease)}
.apb-rx-im-card:hover{border-color:color-mix(in srgb,var(--apb-rx-brand) 30%,var(--apb-rx-line))}
.apb-rx-im-logo{width:40px;height:40px;border-radius:11px;flex:0 0 auto;display:grid;place-items:center;color:var(--apb-rx-ink);background:var(--apb-rx-soft);border:1px solid var(--apb-rx-line);overflow:hidden}
.apb-rx-im-logo img{width:100%;height:100%;object-fit:cover}
.apb-rx-im-logo--txt{font-weight:750;font-size:15px;color:var(--apb-rx-brand)}
.apb-rx-im-nm{font-size:14px;font-weight:650;color:var(--apb-rx-ink)}
.apb-rx-im-tag{font-size:12px;color:var(--apb-rx-muted);text-transform:capitalize}
.apb-rx-im-empty{display:none;text-align:center;color:var(--apb-rx-muted);font-size:14px;padding:20px}
@media(max-width:680px){.apb-rx-im-grid{grid-template-columns:1fr 1fr}}
@media(max-width:440px){.apb-rx-im-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.apb-rx-im-card{transition:none}}

/* ---------- sdk quickstart (CSS-only :checked tabs) ---------- */
.apb-rx-sq{padding:clamp(44px,7vw,80px) 24px}
.apb-rx-sq-inner{max-width:680px;margin:0 auto}
.apb-rx-sq-head{margin:0 0 22px}
.apb-rx-sq-head h3{font-size:clamp(22px,3.4vw,30px);font-weight:780;letter-spacing:-.02em;color:var(--apb-rx-ink);margin:0 0 6px}
.apb-rx-sq-head p{font-size:16px;color:var(--apb-rx-muted);margin:0}
.apb-rx-sq-radio{position:absolute;opacity:0;width:1px;height:1px;overflow:hidden}
.apb-rx-sq-tabs{display:inline-flex;gap:4px;background:var(--apb-rx-soft);border-radius:var(--apb-rx-radius-pill,999px);padding:4px;margin-bottom:20px;flex-wrap:wrap}
.apb-rx-sq-tab{display:inline-block;font-size:13px;font-weight:600;cursor:pointer;color:var(--apb-rx-muted);border-radius:var(--apb-rx-radius-pill,999px);padding:7px 16px;transition:color var(--apb-rx-t,.28s) var(--apb-rx-ease),background var(--apb-rx-t,.28s) var(--apb-rx-ease)}
.apb-rx-sq-radio:checked+.apb-rx-sq-tab{color:var(--apb-rx-ink);background:var(--apb-rx-surface,#fff);box-shadow:var(--apb-rx-shadow-1,0 1px 2px rgba(11,13,18,.06))}
.apb-rx-sq-radio:focus-visible+.apb-rx-sq-tab{outline:2px solid var(--apb-rx-brand);outline-offset:2px}
.apb-rx-sq-step{display:grid;grid-template-columns:32px 1fr;gap:14px;margin-bottom:16px}
.apb-rx-sq-n{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:14px;font-weight:700;color:var(--apb-rx-brand);background:color-mix(in srgb,var(--apb-rx-brand) 10%,var(--apb-rx-surface,#fff));border:1px solid color-mix(in srgb,var(--apb-rx-brand) 22%,transparent)}
.apb-rx-sq-sh{font-size:14.5px;font-weight:650;color:var(--apb-rx-ink);margin:5px 0 8px}
.apb-rx-sq-code{background:var(--apb-rx-ink);border-radius:var(--apb-rx-radius,10px);padding:14px 16px;overflow-x:auto;font-family:ui-monospace,Menlo,monospace;font-size:13px;line-height:1.6;color:#e6e9ef;margin:0}
.apb-rx-sq-panel{display:none}
/* Radios are flat siblings of .apb-rx-sq-step (both direct children of .apb-rx-sq-inner); panel N shows
   only while radio N is :checked (CSS-only, no JS). */
.apb-rx-sq-radio--0:checked~.apb-rx-sq-step .apb-rx-sq-panel--0{display:block}
.apb-rx-sq-radio--1:checked~.apb-rx-sq-step .apb-rx-sq-panel--1{display:block}
.apb-rx-sq-radio--2:checked~.apb-rx-sq-step .apb-rx-sq-panel--2{display:block}
.apb-rx-sq-radio--3:checked~.apb-rx-sq-step .apb-rx-sq-panel--3{display:block}
@media(prefers-reduced-motion:reduce){.apb-rx-sq-tab{transition:none}}

/* ---------- webhook events table ---------- */
.apb-rx-we{padding:clamp(44px,7vw,80px) 24px}
.apb-rx-we-inner{max-width:760px;margin:0 auto}
.apb-rx-we-head{margin:0 0 20px}
.apb-rx-we-head h3{font-size:clamp(21px,3vw,27px);font-weight:770;letter-spacing:-.02em;color:var(--apb-rx-ink);margin:0 0 6px}
.apb-rx-we-head p{font-size:15px;color:var(--apb-rx-muted);margin:0}
.apb-rx-we-table{border:1px solid var(--apb-rx-line);border-radius:var(--apb-rx-radius,14px);overflow:hidden;background:var(--apb-rx-surface,#fff);box-shadow:var(--apb-rx-shadow-1,0 1px 2px rgba(11,13,18,.06))}
.apb-rx-we-row{display:grid;grid-template-columns:220px 1fr auto;gap:16px;align-items:center;padding:14px 18px}
.apb-rx-we-row+.apb-rx-we-row{border-top:1px solid var(--apb-rx-line)}
.apb-rx-we-row.head{background:var(--apb-rx-soft);font-size:12px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--apb-rx-muted)}
.apb-rx-we-ev{font-family:ui-monospace,Menlo,monospace;font-size:13px;font-weight:600;color:var(--apb-rx-brand);white-space:nowrap}
.apb-rx-we-desc{font-size:13.5px;color:var(--apb-rx-muted);line-height:1.5}
.apb-rx-we-method{font-size:11px;font-weight:700;color:var(--apb-rx-ink);background:var(--apb-rx-soft);border:1px solid var(--apb-rx-line);border-radius:6px;padding:3px 8px;white-space:nowrap}
@media(max-width:600px){.apb-rx-we-row{grid-template-columns:1fr;gap:5px}.apb-rx-we-row.head{display:none}}