/**
 * Media/diagram recipes: animated_diagram / interactive_infographic / product_360.
 * apb-rx-* tokens only; brand derives from --apb-rx-brand + scheme. Reduced-motion fallbacks inline.
 * Rendered by trait-apb-component-render-media2.php. No literals for brand/glow/tint.
 */

/* ---------- animated diagram ---------- */
.apb-rx-fd{padding:clamp(44px,7vw,80px) 24px}
.apb-rx-fd-inner{max-width:820px;margin:0 auto}
.apb-rx-fd-head{text-align:center;max-width:520px;margin:0 auto 30px}
.apb-rx-fd-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-fd-head p{font-size:16px;color:var(--apb-rx-muted);margin:0}
.apb-rx-fd-canvas{position:relative;width:100%;height:clamp(260px,42vw,420px)}
.apb-rx-fd-svg{position:absolute;inset:0;width:100%;height:100%}
.apb-rx-fd-line{fill:none;stroke:var(--apb-rx-line);stroke-width:.6;vector-effect:non-scaling-stroke}
.apb-rx-fd-line.live{stroke:var(--apb-rx-brand);stroke-dasharray:2.4 2.4;animation:apb-rx-fd-flow 1.1s linear infinite}
@keyframes apb-rx-fd-flow{to{stroke-dashoffset:-9.6}}
@media(prefers-reduced-motion:reduce){.apb-rx-fd-line.live{animation:none;stroke-dasharray:none}}
.apb-rx-fd-node{position:absolute;transform:translate(-50%,-50%);width:150px;text-align:center;background:var(--apb-rx-surface,#fff);border:1px solid var(--apb-rx-line);border-radius:var(--apb-rx-radius,14px);padding:14px 12px;box-shadow:var(--apb-rx-shadow-1,0 1px 2px rgba(11,13,18,.06))}
.apb-rx-fd-node.accent{border-color:var(--apb-rx-brand);box-shadow:0 12px 30px -16px var(--apb-rx-glow)}
.apb-rx-fd-node .apb-rx-leaficon{width:40px;height:40px;border-radius:11px;margin:0 auto 10px;display:grid;place-items:center;color:var(--apb-rx-ink);background:var(--apb-rx-soft);border:1px solid var(--apb-rx-line)}
.apb-rx-fd-node.accent .apb-rx-leaficon{color:var(--apb-rx-accent-contrast,#fff);background:var(--apb-rx-brand);border-color:var(--apb-rx-brand)}
.apb-rx-fd-nt{font-size:13.5px;font-weight:700;color:var(--apb-rx-ink)}
.apb-rx-fd-nd{font-size:11.5px;color:var(--apb-rx-muted);margin-top:2px}
@media(max-width:680px){.apb-rx-fd-node{width:120px;padding:10px 8px}.apb-rx-fd-canvas{height:clamp(340px,90vw,520px)}}

/* ---------- interactive infographic ---------- */
.apb-rx-ig{padding:clamp(44px,7vw,80px) 24px}
.apb-rx-ig-inner{max-width:820px;margin:0 auto}
.apb-rx-ig-head{text-align:center;max-width:520px;margin:0 auto 26px}
.apb-rx-ig-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-ig-head p{font-size:16px;color:var(--apb-rx-muted);margin:0}
.apb-rx-ig-track{position:relative;display:flex;justify-content:space-between;margin:0 auto 30px;max-width:560px;--apb-rx-igfill:0%}
.apb-rx-ig-track::before{content:"";position:absolute;top:15px;left:8%;right:8%;height:2px;background:var(--apb-rx-line)}
.apb-rx-ig-track::after{content:"";position:absolute;top:15px;left:8%;width:var(--apb-rx-igfill,0%);max-width:84%;height:2px;background:var(--apb-rx-brand);transition:width var(--apb-rx-t,.4s) var(--apb-rx-ease)}
@media(prefers-reduced-motion:reduce){.apb-rx-ig-track::after{transition:none}}
.apb-rx-ig-node{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:8px}
.apb-rx-ig-dot{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700;background:var(--apb-rx-surface,#fff);border:2px solid var(--apb-rx-line);color:var(--apb-rx-muted)}
.apb-rx-ig-node.done .apb-rx-ig-dot{color:var(--apb-rx-accent-contrast,#fff);background:var(--apb-rx-brand);border-color:var(--apb-rx-brand)}
.apb-rx-ig-node.on .apb-rx-ig-dot{color:var(--apb-rx-brand);border-color:var(--apb-rx-brand);box-shadow:0 0 0 4px color-mix(in srgb,var(--apb-rx-brand) 16%,transparent)}
.apb-rx-ig-nl{font-size:12px;font-weight:600;color:var(--apb-rx-muted)}
.apb-rx-ig-node.on .apb-rx-ig-nl{color:var(--apb-rx-ink)}
.apb-rx-ig-card{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center;background:var(--apb-rx-surface,#fff);border:1px solid var(--apb-rx-line);border-radius:var(--apb-rx-radius,18px);padding:clamp(22px,3vw,32px);box-shadow:var(--apb-rx-shadow-1,0 1px 2px rgba(11,13,18,.06))}
.apb-rx-ig-stat{font-family:var(--apb-rx-font-display,var(--apb-rx-font));font-size:clamp(44px,8vw,68px);font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--apb-rx-brand);font-variant-numeric:tabular-nums;white-space:nowrap}
.apb-rx-ig-txt h4{font-size:17px;font-weight:750;color:var(--apb-rx-ink);margin:0 0 6px}
.apb-rx-ig-txt p{font-size:14.5px;line-height:1.6;color:var(--apb-rx-muted);margin:0}
.apb-rx-ig-bar{margin-top:18px;height:8px;border-radius:999px;background:var(--apb-rx-soft);overflow:hidden}
.apb-rx-ig-bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--apb-rx-brand),var(--apb-rx-brand2,var(--apb-rx-brand)))}
@media(max-width:560px){.apb-rx-ig-card{grid-template-columns:1fr;text-align:center}}

/* ---------- product 360 (static fail-open; drag-to-spin is JS-only, not shipped here) ---------- */
.apb-rx-360{padding:clamp(40px,6vw,72px) 24px}
.apb-rx-360-inner{max-width:520px;margin:0 auto;text-align:center}
.apb-rx-360-stage{position:relative;aspect-ratio:1;border-radius:var(--apb-rx-radius,18px);overflow:hidden;background:radial-gradient(120% 120% at 50% 20%,var(--apb-rx-surface,#fff),var(--apb-rx-soft));border:1px solid var(--apb-rx-line);display:grid;place-items:center}
.apb-rx-360-stage img{width:78%;height:78%;object-fit:contain;-webkit-user-drag:none;user-select:none}
.apb-rx-360-badge{position:absolute;top:14px;left:14px;display:inline-flex;align-items:center;gap:6px;font-size:12px;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);border-radius:999px;padding:5px 11px}
.apb-rx-360-hint{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--apb-rx-muted);background:color-mix(in srgb,var(--apb-rx-surface,#fff) 84%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid var(--apb-rx-line);border-radius:999px;padding:6px 14px}
.apb-rx-360-scrub{display:flex;align-items:center;gap:12px;margin-top:18px}
.apb-rx-360-track{flex:1;height:5px;border-radius:999px;background:var(--apb-rx-soft);position:relative;display:inline-block}
.apb-rx-360-knob{position:absolute;top:50%;transform:translate(-50%,-50%);width:16px;height:16px;border-radius:50%;background:var(--apb-rx-surface,#fff);border:2px solid var(--apb-rx-brand);box-shadow:0 3px 8px -2px var(--apb-rx-glow)}
.apb-rx-360-frame{font-size:12px;font-weight:600;color:var(--apb-rx-muted);font-variant-numeric:tabular-nums;white-space:nowrap}