/* ============================================================================
 * AVA DEMO PILL (RUN 3) — the homepage's proof, compact, on every hub page.
 * ONE shared component (injected by tools/stamp.py; never per-page forked). Taps
 * through to the homepage Backstage theater at /?trade=<TRADE>#stage.
 *
 * Backstage tokens are hardcoded here (void #0A0A0F · ink #EEF0F4 · cyan #00D4FF ·
 * green #00E676 · Space Grotesk) so the pill looks identical on circulant pages
 * (which don't load backstage.css) and on backstage pages alike. Both themes;
 * reduced-motion safe (orbs are static; the ava-pulse edge ring self-stills via
 * bridge.css); zero layout shift (the ring is injected, absolute, masked).
 * ========================================================================== */
.dp-wrap{max-width:620px;margin:22px auto;padding:0 20px;box-sizing:border-box}
.dp-pill{
  display:flex;align-items:center;gap:15px;width:100%;box-sizing:border-box;
  padding:13px 17px;border-radius:16px;text-decoration:none;
  font-family:'Space Grotesk',system-ui,-apple-system,sans-serif;
  color:#EEF0F4;background:#10131A;border:1px solid #23232E;
  box-shadow:0 10px 32px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.05);
  transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease;
}
@media(hover:hover){.dp-pill:hover{border-color:#00D4FF;transform:translateY(-2px);
  box-shadow:0 16px 46px rgba(0,0,0,.5),0 0 28px rgba(0,212,255,.16),inset 0 1px 0 rgba(255,255,255,.06)}}
.dp-pill:focus-visible{outline:2px solid #00D4FF;outline-offset:3px}
/* orbs — the pipeline in miniature: three cyan working orbs → one green "booked".
   Static (perf-safe, reduced-motion safe). Two accents only (cyan + green). */
.dp-orbs{flex:none;display:flex;align-items:center;gap:6px}
.dp-orbs i{width:9px;height:9px;border-radius:50%;display:block;background:#00D4FF}
.dp-orbs i:nth-child(1){opacity:.5}
.dp-orbs i:nth-child(2){opacity:.7}
.dp-orbs i:nth-child(3){opacity:.9;box-shadow:0 0 7px rgba(0,212,255,.55)}
/* RUN 3: Booked-Green, not the legacy #00E676 — one green sitewide */
.dp-orbs i:nth-child(4){background:#2EE6A8;box-shadow:0 0 8px rgba(46,230,168,.6)}
.dp-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.dp-kicker{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:#9AA1AD}
.dp-kicker b{color:#00D4FF;font-weight:700}
.dp-result{font-size:13.5px;font-weight:500;color:#EEF0F4;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dp-result b{color:#2EE6A8;font-weight:700}   /* Booked-Green — captured/success */
.dp-go{flex:none;font-size:12px;font-weight:700;letter-spacing:.03em;color:#00D4FF;
  white-space:nowrap;text-transform:uppercase}
/* narrow (<=520px): stack the CTA under the copy so nothing overflows @390 */
@media(max-width:520px){
  .dp-pill{flex-wrap:wrap;gap:11px 12px;padding:13px 15px}
  .dp-copy{flex:1 1 140px}
  .dp-result{white-space:normal}
  .dp-go{flex:1 0 100%;padding-top:9px;margin-top:2px;border-top:1px solid #23232E}
}
/* light theme (paper) */
html[data-theme="light"] .dp-pill{background:#FFFFFF;color:#10131A;border-color:#E3E7EE;
  box-shadow:0 8px 24px rgba(16,19,26,.10),inset 0 1px 0 rgba(255,255,255,.7)}
html[data-theme="light"] .dp-result{color:#10131A}
/* RUN 3 AA fix — the previous light values were assumed, not measured, and all
   three failed on white: green #0a9d57 = 3.52:1, cyan #0090b8 = 3.70:1, and the
   kicker's <b> was never overridden at all so it stayed #00D4FF = 1.77:1.
   Measured replacements: green 5.37:1 ✓ · cyan 6.22:1 ✓. */
html[data-theme="light"] .dp-result b{color:#077A50}   /* 5.37:1 ✓ */
html[data-theme="light"] .dp-kicker{color:#5A6473}
html[data-theme="light"] .dp-kicker b{color:#00688F}   /* 6.22:1 ✓ */
html[data-theme="light"] .dp-go{color:#00688F}         /* 6.22:1 ✓ */
@media(hover:hover){html[data-theme="light"] .dp-pill:hover{border-color:#00D4FF}}
@media(max-width:520px){html[data-theme="light"] .dp-go{border-top-color:#E3E7EE}}