/* ─── HELIX polish layer ─────────────────────────────────────────────
   Loaded AFTER index.css. Tightens type, numerics, focus, scrollbars,
   selection, and the perp-DEX details that read "sharp". Add nothing
   here that isn't a refinement of an existing element.
   ──────────────────────────────────────────────────────────────────── */

/* ─── crisp rendering ─────────────────────────────────────────────── */
html {
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── tabular numerals on every numeric display ───────────────────── */
/* Aligns digits in columns the way every serious perp DEX does. */
.ds-v, .ds-price-v, .ds-price-chg,
.stat-v, .stat-num, .stat-cell-v,
.lp-stat-v, .lp-h1-meta-v, .lp-hero-syslog-v,
.lph-syslog-v, .lp-num, .lp-pct, .lp-usd,
.opos-v, .opos-pct,
.rt-v, .rt-num, .rt-pct,
.tape-v, .tape-px, .tape-sz, .tape-pnl,
.lb-v, .lb-pnl, .lb-vol, .lb-roi,
.lp-baseta-stat-v,
.hr-meta,
.foot-build,
.ca-state,
.mode-badge,
.brand-ver,
.docs-body td.t-num, .docs-body th.t-num,
.docs-body code, .docs-body pre,
.sg-wrap pre, .sg-wrap code,
.sg-wrap td.mint,
.st-tile-value, .st-tile-label,
.st-banner-score, .st-card-name, .st-card-detail, .st-card-status,
.st-footnote,
.bs-readout, .bs-yticks, .bs-axis,
.bands-row,
table td, table th,
pre, code,
[class*="-num"], [class*="-px"], [class*="-pnl"], [class*="-pct"], [class*="-usd"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1, "calt" 0, "liga" 0;
}

/* ─── selection · mint highlight on black ─────────────────────────── */
::selection {
  background: #97fce433;
  color: #c5fbed;
}
::-moz-selection {
  background: #97fce433;
  color: #c5fbed;
}

/* ─── focus · mint outline, no halo, sharp ────────────────────────── */
:focus { outline: none; }
:focus-visible {
  outline: 1px solid #97fce4;
  outline-offset: 2px;
  border-radius: 1px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 1px solid #97fce4;
  outline-offset: 2px;
}
input[type="text"]:focus-visible,
input:not([type]):focus-visible {
  outline: none;
  border-color: #97fce4 !important;
  box-shadow: 0 0 0 1px #97fce466;
}

/* ─── scrollbars · thin, mono, mint-on-hover ──────────────────────── */
* { scrollbar-width: thin; scrollbar-color: #2e2e34 #060608; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: #060608; }
*::-webkit-scrollbar-thumb {
  background: #1a1a1d;
  border: 1px solid #060608;
}
*::-webkit-scrollbar-thumb:hover { background: #97fce4; }
*::-webkit-scrollbar-corner { background: #060608; }

/* ─── hairline section dividers · subtle ──────────────────────────── */
hr {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, #1a1a1d 12%, #1a1a1d 88%, transparent);
  margin: 32px 0;
}

/* ─── link affordance · dotted-mint hover ─────────────────────────── */
.docs-body a:hover,
.sg-wrap a:hover {
  text-shadow: 0 0 8px #97fce433;
}

/* ─── topbar polish · tighter alignment + mode badge ──────────────── */
.mode-badge {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 3px 9px 3px 16px;
  border: 1px solid var(--line);
  color: var(--ink-dim);
  position: relative;
  border-radius: 1px;
}
.mode-badge::before {
  content: "";
  position: absolute;
  left: 7px; top: 50%;
  width: 5px; height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: var(--ink-mute);
  box-shadow: 0 0 0 1px #050507;
}
/* Live state — JS adds inline color:#97fce4 */
.mode-badge[style*="97fce4"] {
  border-color: #97fce433;
  background: #97fce408;
}
.mode-badge[style*="97fce4"]::before {
  background: #97fce4;
  box-shadow: 0 0 6px #97fce4;
  animation: hxBadgePulse 2s infinite;
}
@keyframes hxBadgePulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* ─── h-ribbon · pulse refinement ─────────────────────────────────── */
.hr-pulse {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #97fce4;
  display: inline-block;
  margin-right: 8px;
  box-shadow: 0 0 8px #97fce4;
  animation: hxRibbonPulse 2.4s infinite;
  vertical-align: middle;
}
@keyframes hxRibbonPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .35; transform: scale(.85); }
}

/* ─── brand-ver · tighter spec ────────────────────────────────────── */
.brand-ver {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-left: 8px;
}

/* ─── buttons · subtle press feedback ─────────────────────────────── */
.btn-outline,
.lp-cta-v11,
.hr-cta,
.hr-cta-ghost {
  transition: background .12s ease, color .12s ease, border-color .12s ease, transform .08s ease;
}
.btn-outline:active,
.lp-cta-v11:active,
.hr-cta:active { transform: translateY(1px); }

/* ─── numerals in market badges · ensure tabular ──────────────────── */
[data-numeric] { font-variant-numeric: tabular-nums; }

/* ─── tooltip / kbd inline polish ─────────────────────────────────── */
kbd {
  font-family: var(--mono);
  font-size: 11px;
  padding: 1px 6px;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 2px;
  background: #050507;
  color: var(--ink-dim);
}

/* ─── PROD-only refinements · use prefers-reduced-motion ──────────── */
@media (prefers-reduced-motion: reduce) {
  .hr-pulse, .mode-badge::before,
  .live-pulse-dot, .st-banner-dot,
  *::before, *::after {
    animation: none !important;
  }
}

/* ─── selection-aware code blocks ─────────────────────────────────── */
pre::selection, pre *::selection,
code::selection {
  background: #97fce433;
  color: #c5fbed;
}

/* ─── form-control polish ─────────────────────────────────────────── */
input[type="text"],
input[type="number"],
input:not([type]),
textarea {
  background: #050507;
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 12.5px;
  padding: 8px 12px;
  border-radius: 1px;
  transition: border-color .12s ease, box-shadow .12s ease;
}
input[type="text"]::placeholder,
input:not([type])::placeholder,
textarea::placeholder { color: var(--ink-faint); }
input[type="text"]:hover,
input:not([type]):hover,
textarea:hover { border-color: #2e2e34; }

/* ─── status banner micro-polish ──────────────────────────────────── */
.st-banner { border-radius: 1px; }
.st-banner h1 { letter-spacing: -.005em; }
.st-card { border-radius: 1px; }
.st-tile { border-radius: 1px; }

/* ─── docs body · tighter table polish ────────────────────────────── */
.docs-body table { border-radius: 1px; overflow: hidden; }
.docs-body tr:hover td { background: rgba(151, 252, 228, 0.02); }
.docs-body .sig:hover .sig-body code { color: #c5fbed; }

/* ─── topbar — flatten spacing so it reads less marketing ─────────── */
.topbar { backdrop-filter: blur(6px); }
.topbar-actions { gap: 10px; }

/* ─── 24-col baseline · invisible grid alignment on hero ──────────── */
.lp-hero-v11, .h-ribbon { contain: layout style; }

/* ─── kill old AI-aesthetic vestiges ──────────────────────────────── */
* { -webkit-tap-highlight-color: transparent; }
img, svg { color-interpolation: linearRGB; }