/* Contract address pill. Shared by the homepage hero and /holders/. Markup: src/index.html and caPill() in scripts/build-docs-set.mjs.
   Light machined shell (like the white hardware), graphite chip and key (like .faithful-button), neon only as signal. */
@property --ca-sweep { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

.hero-ca {
  --hero-ink: #272925;
  --hero-muted: #94988d;
  --hero-ease: cubic-bezier(.16, 1, .3, 1);
  box-sizing: border-box;
  --ca-x: 50%;
  --ca-neon: #ccff00;
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(100%, 610px);
  min-height: 60px;
  padding: 7px 7px 7px 7px;
  border: 1px solid #dfe3d8;
  border-radius: 999px;
  background:
    radial-gradient(120px 60px at var(--ca-x) 0%, #ffffffd9, transparent 70%),
    linear-gradient(180deg, #ffffff 0%, #f6f7f3 58%, #eef0ea 100%);
  box-shadow:
    inset 0 1px 0 #ffffff,
    inset 0 -1px 0 #e1e5da,
    0 1px 0 #ffffffcc,
    0 1px 2px #23281c12,
    0 12px 28px -14px #2a301f38;
  color: var(--hero-ink);
  cursor: copy;
  -webkit-tap-highlight-color: transparent;
  transition: transform .45s var(--hero-ease), box-shadow .3s, border-color .3s;
}

/* Neon edge that sweeps around the pill on hover / focus. */
.hero-ca::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--ca-sweep), transparent 0deg, #ccff00b3 40deg, #e9ff99 62deg, transparent 110deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s;
}

.hero-ca:is(:hover, :focus-within) {
  border-color: #cfd6c3;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 #ffffff,
    inset 0 -1px 0 #e1e5da,
    0 1px 0 #ffffffcc,
    0 2px 4px #23281c14,
    0 18px 36px -16px #2a301f4d,
    0 0 0 4px #ccff0014;
}

.hero-ca:is(:hover, :focus-within)::before {
  opacity: 1;
  animation: hero-ca-sweep 3.2s linear infinite;
}

.hero-ca:active { transform: translateY(0) scale(.992); transition-duration: .12s; }

.hero-ca.is-copied { border-color: #c4d48a; }
.hero-ca.is-copied::before { opacity: 1; background: linear-gradient(#ccff00cc, #ccff00cc); animation: none; }

@keyframes hero-ca-sweep { to { --ca-sweep: 360deg; } }
@keyframes hero-ca-in { from { opacity: 0; transform: translateY(8px); } }

/* Graphite ticker chip with a status LED. */
.hero-ca .hero-ca-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 15px 0 13px;
  border-radius: 999px;
  border: 1px solid #71747180;
  background:
    repeating-linear-gradient(108deg, #ffffff04 0 1px, #00000003 1px 2px, transparent 2px 4px),
    linear-gradient(165deg, #5f635f 0%, #404440 24%, #323432 72%, #272a27 100%);
  box-shadow: inset 0 1px 0 #d7dbd857, inset 0 -1px 0 #121412cc, 0 2px 0 #1a1c1a, 0 4px 6px -3px #16171647;
  color: #eff0ef;
  font: 600 13px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .02em;
  text-shadow: 0 1px 1px #13141380;
}

.hero-ca .hero-ca-led {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f4ffc2, #ccff00 55%, #9fc400);
  box-shadow: 0 0 0 2px #ccff0024, 0 0 8px #ccff00a6;
  animation: hero-ca-led 2.6s ease-in-out infinite;
}

@keyframes hero-ca-led { 50% { box-shadow: 0 0 0 3px #ccff0012, 0 0 4px #ccff0059; opacity: .75; } }

.hero-ca .hero-ca-label {
  flex: none;
  padding-left: 12px;
  border-left: 1px solid #e1e5da;
  line-height: 22px;
  color: var(--hero-muted);
  font: 600 10.5px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .16em;
}

.hero-ca .hero-ca-value {
  display: flex;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: #2f322c;
  font: 500 14.5px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .01em;
  text-align: left;
  white-space: nowrap;
  user-select: text;
  -webkit-user-select: text;
  transition: color .25s;
}

.hero-ca:hover .hero-ca-value { color: #1d1f1b; }
.hero-ca .hero-ca-value::selection, .hero-ca .hero-ca-value *::selection { background: #ccff0080; color: #1d1f1b; }

/* Middle ellipsis: the head truncates, the last 6 characters stay. Selecting/copying still gets the full address. */
.hero-ca .hero-ca-head { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.hero-ca .hero-ca-tail { flex: none; }

/* Graphite copy key, same material as the site's buttons. */
.hero-ca .hero-ca-copy {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid #71747180;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at var(--surface-x, 30%) var(--surface-y, 0%), #c1c6c12b, transparent 65%),
    repeating-linear-gradient(108deg, #ffffff04 0 1px, #00000003 1px 2px, transparent 2px 4px),
    linear-gradient(165deg, #5f635f 0%, #404440 24%, #323432 72%, #272a27 100%);
  box-shadow: inset 0 1px 0 #d7dbd857, inset 1px 0 0 #a0a8a12b, inset -1px 0 0 #181b1980, inset 0 -1px 0 #121412cc, 0 2px 0 #1a1c1a, 0 4px 6px -3px #16171647;
  color: #eff0ef;
  cursor: pointer;
  transition: box-shadow .22s, color .2s, transform .35s var(--hero-ease);
}

.hero-ca .hero-ca-copy::after {
  content: "";
  position: absolute;
  left: calc(50% - 5px);
  bottom: 5px;
  width: 10px;
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(90deg, #ccff00 0 25%, transparent 25% 75%, #ccff00 75%);
  opacity: .6;
  transition: opacity .2s, filter .2s;
}

.hero-ca:hover .hero-ca-copy,
.hero-ca .hero-ca-copy:focus-visible {
  color: #ffffff;
  box-shadow: inset 0 1px 0 #e7e8e780, inset 1px 0 0 #bdc2bd40, inset -1px 0 0 #1a1c1a80, inset 0 -1px 0 #121312cc, 0 2px 0 #1c1f1c, 0 6px 9px -4px #21232152, 0 0 0 1px #ccff0026;
}

.hero-ca:hover .hero-ca-copy::after,
.hero-ca .hero-ca-copy:focus-visible::after { opacity: 1; filter: drop-shadow(0 0 3px #ccff0099); }

.hero-ca:active .hero-ca-copy {
  transform: translateY(1px) scale(.96);
  box-shadow: inset 0 1px 3px #1113116b, inset 0 0 0 1px #929a9233, 0 1px 0 #1c1e1c;
}

.hero-ca .hero-ca-copy:focus-visible { outline: 2px solid #7b857b; outline-offset: 3px; }
.hero-ca.is-copied .hero-ca-copy { color: #ccff00; }

.hero-ca .hero-ca-icon {
  width: 20px;
  height: 20px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-top: -2px;
}

.hero-ca .hero-ca-icon-copy { transform-origin: 12px 12px; transition: transform .35s var(--hero-ease), opacity .2s; }
.hero-ca .hero-ca-icon-check { stroke-width: 2.2; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; filter: drop-shadow(0 0 3px #ccff0080); transition: stroke-dashoffset .38s var(--hero-ease) .06s, opacity .1s; }
.hero-ca.is-copied .hero-ca-icon-copy { transform: scale(.4) rotate(-20deg); opacity: 0; }
.hero-ca.is-copied .hero-ca-icon-check { stroke-dashoffset: 0; opacity: 1; }

/* "Copied!" toast that rises above the copy key. */
.hero-ca .hero-ca-tip {
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px 7px 10px;
  border: 1px solid #71747180;
  border-radius: 999px;
  background: linear-gradient(165deg, #4b4f4b, #2a2d2a);
  box-shadow: inset 0 1px 0 #d7dbd840, 0 10px 20px -8px #1a1d1766;
  color: #f4f5f2;
  font: 600 12px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .02em;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(6px) scale(.96);
  transform-origin: 85% 100%;
  pointer-events: none;
  transition: opacity .2s, transform .35s var(--hero-ease);
}

.hero-ca .hero-ca-tip::after {
  content: "";
  position: absolute;
  right: 26px;
  top: 100%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  background: #2b2e2b;
  border-right: 1px solid #71747180;
  border-bottom: 1px solid #71747180;
  transform: rotate(45deg);
}

.hero-ca .hero-ca-tip svg { width: 13px; height: 13px; fill: none; stroke: #ccff00; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hero-ca.is-copied .hero-ca-tip { opacity: 1; transform: translateY(0) scale(1); }
.hero-ca.is-failed .hero-ca-tip { opacity: 1; transform: none; }

.hero-ca .hero-ca-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 639px) {
  .hero-ca { gap: 9px; min-height: 56px; margin-top: 20px; padding: 5px; }
  .hero-ca .hero-ca-chip { height: 44px; padding: 0 11px 0 10px; gap: 7px; font-size: 12px; }
  .hero-ca .hero-ca-label { display: none; }
  .hero-ca .hero-ca-value { font-size: 13px; padding-left: 2px; }
  .hero-ca .hero-ca-copy { width: 44px; height: 44px; }
  /* Toast drops below the pill on phones so it never covers the CTA above. */
  .hero-ca .hero-ca-tip { bottom: auto; top: calc(100% + 12px); right: 0; transform: translateY(-6px) scale(.96); transform-origin: 85% 0; }
  .hero-ca .hero-ca-tip::after { top: auto; bottom: 100%; margin-top: 0; margin-bottom: -4px; border: 0; border-left: 1px solid #71747180; border-top: 1px solid #71747180; background: #474b47; right: 24px; }
}

@media (max-width: 340px) {
  .hero-ca .hero-ca-chip .hero-ca-led { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-ca, .hero-ca .hero-ca-led { animation: none; }
  .hero-ca:is(:hover, :focus-within)::before { animation: none; background: linear-gradient(#ccff0066, #ccff0066); }
  .hero-ca, .hero-ca:is(:hover, :focus-within, :active) { transform: none; }
  .hero-ca *, .hero-ca::before { transition-duration: .01ms !important; }
}

.hero-ca *, .hero-ca *::before, .hero-ca *::after { box-sizing: border-box; }
.hero-ca button { font: inherit; margin: 0; }
.hero-ca .hero-ca-value { background: none; border: 0; padding: 0; border-radius: 0; }
/* In document pages the pill sits in the text column. */
.docs-section .hero-ca { margin: 18px 0 22px; }
.hero-ca-caption { margin: 22px 0 -6px; color: #6f7468; font: 600 11px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .14em; text-transform: uppercase; }

/* "Live on Solana" notch tag that sits on the pill's top edge. */
.hero-ca .hero-ca-live {
  position: absolute;
  left: 92px;
  top: 0;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 10px 0 8px;
  border: 1px solid #c9d88e;
  border-radius: 999px;
  background: linear-gradient(180deg, #fbffe9, #eef7c8);
  box-shadow: 0 0 0 3px #f7f7f5, 0 4px 10px -6px #5b6b1d66;
  color: #3b4a12;
  font: 700 10px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}
.hero-ca .hero-ca-live i {
  position: relative;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #7fb800;
  box-shadow: 0 0 6px #ccff00;
}
.hero-ca .hero-ca-live i::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid #9fd400;
  animation: hero-ca-ping 2.2s cubic-bezier(.16, 1, .3, 1) infinite;
}
@keyframes hero-ca-ping { from { transform: scale(.4); opacity: .9; } to { transform: scale(1.8); opacity: 0; } }
.docs-section .hero-ca { margin-top: 24px; }
@media (max-width: 639px) {
  .hero-ca .hero-ca-live { left: 84px; height: 20px; font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) { .hero-ca .hero-ca-live i::after { animation: none; opacity: 0; } }