/* Signals (components/signals.mjs): buttons that track the floating particle icons, their tags, and the live panel.
   Built from the hero's own language: hairlines, the 30px header blur, 12px radius and uppercase tracked labels.
   Type roles are variables so a page can set its own faces (the Nyx page sets all of them to one mono). */
:root {
  --ah-signal-accent: #b9a6ff;
  --ah-signal-up: #9fe8c6;
  --ah-signal-down: #ff9eb5;
  --ah-panel-surface: rgba(7, 5, 14, 0.66);
  --ah-panel-width: 380px;
  --ah-z-signals: 10000;
  --ah-signal-font: var(--ah-font-label);            /* tags, labels, meta */
  --ah-signal-font-figure: var(--ah-font-sans);      /* rows and large figures */
  --ah-signal-figure-weight: 400;
  --ah-signal-font-title: var(--ah-font-serif);      /* panel titles, ranks, empty states */
  --ah-signal-title-style: italic;
  --ah-signal-title-size: 30px;
  --ah-signal-ink-muted: rgba(255, 255, 255, 0.72);
  --ah-signal-ink-faint: rgba(255, 255, 255, 0.60);
}

.nyx-purpose { position: fixed; left: 5vw; bottom: 6vh; z-index: 10001; max-width: 460px; color: #eee8ff; font-family: var(--nyx-mono); pointer-events: none; }
.nyx-purpose__eyebrow { margin: 0 0 14px; color: #b9a6ff; font-size: 11px; line-height: 1.5; }
.nyx-purpose h1 { font: 400 clamp(19px, 2vw, 28px)/1.35 var(--nyx-mono); letter-spacing: -.03em; margin: 0; }
.nyx-purpose__detail { color: #bab3cd; font-size: 11px; line-height: 1.7; margin: 15px 0 8px; }
.nyx-purpose__open { font: 400 12px/1.5 var(--nyx-mono); padding: 10px 0; min-height: 44px; border: 0; border-bottom: 1px solid #665786; color: #dccbff; background: transparent; pointer-events: auto; cursor: pointer; }
.nyx-purpose__open span { padding-left: 18px; }
.nyx-purpose__open:disabled { opacity: .5; cursor: wait; }
.nyx-purpose__open:focus-visible { outline: 1px solid #dccbff; outline-offset: 5px; }
body:has(.ah-panel:not([hidden])) .nyx-purpose { visibility: hidden; }
.nyx-case { padding: 20px; font: 400 12px/1.75 var(--nyx-mono); color: #d1cbdc; }
.nyx-case__heading { font: 400 17px/1.45 var(--nyx-mono); letter-spacing: -.025em; color: #f2edff; margin: 0 0 12px; }
.nyx-case__intro { margin: 0 0 18px; color: #dccbff; }
.nyx-case__record { border-top: 1px solid #ffffff19; padding: 14px 0; }
.nyx-case__record h4 { color: #f2edff; font-size: 12px; font-weight: 500; margin: 0 0 7px; }
.nyx-case__record p { margin: 0; }
.nyx-case__link { color: #c8b8ff; display: inline-block; padding: 12px 0 5px; min-height: 44px; text-underline-offset: 4px; }
.nyx-case__link:focus-visible { outline: 1px solid #dccbff; outline-offset: 3px; }
.nyx-case__date, .nyx-case__note { font-size: 10px; color: #b5abc8; margin: 12px 0 0; }
@media(max-width: 600px) {
  .nyx-purpose { left: 24px; bottom: max(20px, env(safe-area-inset-bottom)); max-width: calc(100vw - 48px); }
  .nyx-purpose h1 { font-size: 19px; }
  .nyx-purpose__eyebrow { margin-bottom: 7px; }
  .nyx-purpose__detail { max-width: 275px; margin: 10px 0 2px; }
}

.ah-signals { position: fixed; inset: 0; z-index: var(--ah-z-signals); pointer-events: none; opacity: 0; transition: opacity 900ms var(--ah-ease-in-out) 500ms; }
.ah-signals.is-ready { opacity: 1; }
.ah-preload .ah-signals { opacity: 0; }
.ah-signals__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ah-signals__lines line { stroke: var(--ah-color-hairline-on-dark); stroke-width: 1; opacity: 0; transition: opacity 200ms; }

/* The button is an invisible disc over the icon; the tag appears beside it on hover, focus and while open. */
.ah-signal { position: absolute; left: 0; top: 0; border: 0; border-radius: var(--ah-radius-round); background: transparent; color: var(--ah-color-ink-inverse); cursor: pointer; pointer-events: auto; -webkit-tap-highlight-color: transparent; will-change: transform; }
.ah-signal:focus { outline: none; }
.ah-signal:focus-visible { outline: 1px solid var(--ah-color-hairline-on-dark); outline-offset: 2px; }
.ah-signal__tag { position: absolute; top: 50%; left: calc(100% + 6px); display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px 7px 9px; border: var(--ah-hairline) solid var(--ah-color-hairline-on-dark); border-radius: var(--ah-radius-round); background: var(--ah-panel-surface); backdrop-filter: blur(var(--ah-header-blur)); -webkit-backdrop-filter: blur(var(--ah-header-blur)); font: 500 var(--ah-text-label) / 1 var(--ah-signal-font); letter-spacing: var(--ah-tracking-label); text-transform: uppercase; white-space: nowrap; opacity: 0; transform: translate(-4px, -50%); transition: opacity 180ms var(--ah-ease-in-out), transform 180ms var(--ah-ease-in-out); pointer-events: none; }
.ah-signal.is-left .ah-signal__tag { left: auto; right: calc(100% + 6px); transform: translate(4px, -50%); }
.ah-signal:hover .ah-signal__tag, .ah-signal:focus-visible .ah-signal__tag, .ah-signal.is-open .ah-signal__tag { opacity: 1; transform: translate(0, -50%); }
.ah-signal__dot, .ah-panel__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ah-signal-accent); box-shadow: 0 0 10px var(--ah-signal-accent); flex: none; }
.ah-signal[data-state="offline"] .ah-signal__dot, .ah-signal[data-state="needs-key"] .ah-signal__dot, .ah-signal[data-state="error"] .ah-signal__dot { background: rgba(255, 255, 255, 0.35); box-shadow: none; }
.ah-signal.is-open .ah-signal__dot { animation: ah-signal-beat 1.6s var(--ah-ease-in-out) infinite; }
@keyframes ah-signal-beat { 50% { opacity: 0.35; } }

/* Panel: anchored beside its icon on wide screens, a bottom sheet below 600px. */
.ah-panel { position: fixed; z-index: calc(var(--ah-z-signals) + 1); left: 0; top: 0; width: min(var(--ah-panel-width), calc(100vw - 48px)); max-height: min(580px, calc(100dvh - 112px)); display: flex; flex-direction: column; border: var(--ah-hairline) solid var(--ah-color-hairline-on-dark); border-radius: var(--ah-radius); background: var(--ah-panel-surface); backdrop-filter: blur(var(--ah-header-blur)); -webkit-backdrop-filter: blur(var(--ah-header-blur)); color: var(--ah-color-ink-inverse); outline: none; }
.ah-panel[hidden] { display: none; }
.ah-panel.is-sheet { left: 0; right: 0; top: auto; bottom: 0; width: 100%; max-height: 66dvh; border-radius: var(--ah-radius) var(--ah-radius) 0 0; border-bottom: 0; padding-bottom: env(safe-area-inset-bottom); }
.ah-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 14px 0 20px; }
.ah-panel__label { display: inline-flex; align-items: center; gap: 10px; min-width: 0; font: 500 var(--ah-text-label) / 1 var(--ah-signal-font); letter-spacing: var(--ah-tracking-label); text-transform: uppercase; white-space: nowrap; }
.ah-panel__context { color: var(--ah-signal-ink-faint); overflow: hidden; text-overflow: ellipsis; }
.ah-panel__context:empty { display: none; }
.ah-panel__context::before { content: "/"; margin-right: 10px; color: var(--ah-signal-ink-faint); }
.ah-panel[data-state="offline"] .ah-panel__dot, .ah-panel[data-state="needs-key"] .ah-panel__dot, .ah-panel[data-state="error"] .ah-panel__dot, .ah-panel[data-state="reconnecting"] .ah-panel__dot { background: rgba(255, 255, 255, 0.35); box-shadow: none; }
.ah-panel[data-state="live"] .ah-panel__dot { animation: ah-signal-beat 1.6s var(--ah-ease-in-out) infinite; }
.ah-panel__close { width: 44px; height: 44px; border: 0; border-radius: var(--ah-radius-round); background: transparent; display: grid; place-items: center; cursor: pointer; flex: none; }
.ah-panel__close span { position: relative; display: grid; place-items: center; width: var(--ah-menu-button-size); height: var(--ah-menu-button-size); border: var(--ah-hairline) solid var(--ah-color-hairline-on-dark); border-radius: var(--ah-radius-round); }
.ah-panel__close span::before, .ah-panel__close span::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1px; margin-left: -6px; background: var(--ah-color-ink-inverse); transform: rotate(45deg); }
.ah-panel__close span::after { transform: rotate(-45deg); }
.ah-panel__close:hover span { background: rgba(255, 255, 255, 0.08); }
.ah-panel__close:focus-visible { outline: none; }
.ah-panel__close:focus-visible span { outline: 1px solid var(--ah-color-ink-inverse); outline-offset: 2px; }
.ah-panel__title { padding: 10px 20px 16px; font: var(--ah-signal-title-style) 400 var(--ah-signal-title-size) / 1.15 var(--ah-signal-font-title); letter-spacing: var(--ah-tracking-title); color: var(--ah-color-ink-inverse); }
.ah-panel__body { flex: 1 1 auto; min-height: 120px; overflow-y: auto; overscroll-behavior: contain; border-top: var(--ah-hairline) solid var(--ah-color-hairline-on-dark); scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.2) transparent; }
.ah-panel__empty { padding: 28px 20px; font: var(--ah-signal-title-style) 400 16px / 1.4 var(--ah-signal-font-title); color: var(--ah-signal-ink-muted); }
.ah-panel__foot { display: flex; justify-content: space-between; gap: 16px; padding: 12px 20px 14px; border-top: var(--ah-hairline) solid var(--ah-color-hairline-on-dark); font: 400 11px / 1.35 var(--ah-signal-font); color: var(--ah-signal-ink-muted); }
.ah-panel__state { flex-shrink: 0; white-space: nowrap; color: rgba(255, 255, 255, 0.8); }
.ah-panel__source { text-align: right; }

/* Rows */
.ah-panel__rows { list-style: none; }
.ah-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 11px 20px; font: var(--ah-signal-figure-weight) 14px / 1.2 var(--ah-signal-font-figure); font-variant-numeric: tabular-nums; }
.ah-row + .ah-row { border-top: var(--ah-hairline) solid rgba(255, 255, 255, 0.07); }
.ah-row--ranked { grid-template-columns: 22px minmax(0, 1fr) auto; }
.ah-row--trade { grid-template-columns: 44px minmax(0, 1fr) auto; }
.ah-row__rank { font: var(--ah-signal-title-style) 400 13px / 1 var(--ah-signal-font-title); color: var(--ah-signal-ink-faint); }
.ah-row__avatar { width: 28px; height: 28px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: rgba(255, 255, 255, 0.08); font: 500 11px / 1 var(--ah-signal-font); color: rgba(255, 255, 255, 0.7); flex: none; }
.ah-row__avatar img { width: 100%; height: 100%; object-fit: cover; }
.ah-row__main, .ah-row__side { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ah-row__side { align-items: end; text-align: right; }
.ah-row__name { display: flex; align-items: center; gap: 8px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ah-row__sub { display: inline-flex; gap: 10px; font: 400 11px / 1.2 var(--ah-signal-font); color: var(--ah-signal-ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ah-row__value { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; white-space: nowrap; }
.ah-row__time { color: var(--ah-signal-ink-faint); }
.ah-row__time:empty { display: none; }
.ah-chip { display: inline-block; padding: 4px 6px; border-radius: 4px; font: 500 10px / 1 var(--ah-signal-font); letter-spacing: var(--ah-tracking-label); text-transform: uppercase; text-align: center; }
.ah-chip--buy { color: var(--ah-signal-up); background: rgba(159, 232, 198, 0.1); }
.ah-chip--sell { color: var(--ah-signal-down); background: rgba(255, 158, 181, 0.1); }
.ah-chip--swap { color: var(--ah-signal-ink-muted); background: rgba(255, 255, 255, 0.07); }
.ah-tag { display: inline-block; padding: 3px 6px; border: var(--ah-hairline) solid rgba(185, 166, 255, 0.45); border-radius: 4px; font: 500 10px / 1 var(--ah-signal-font); letter-spacing: var(--ah-tracking-label); text-transform: uppercase; color: var(--ah-signal-accent); }

/* Value views: a large figure, changes, a trace, and facts. */
.ah-figure { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; padding: 24px 20px 4px; }
.ah-figure__value { font: var(--ah-signal-figure-weight) 40px / 1 var(--ah-signal-font-figure); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ah-figure__value.is-up { color: var(--ah-signal-up); }
.ah-figure__value.is-down { color: var(--ah-signal-down); }
.ah-figure__unit { font: 500 var(--ah-text-label) / 1 var(--ah-signal-font); letter-spacing: var(--ah-tracking-label); text-transform: uppercase; color: var(--ah-signal-ink-muted); }
.ah-figure__meta { display: flex; justify-content: space-between; gap: 12px; padding: 10px 20px 18px; font: 400 11px / 1.35 var(--ah-signal-font); color: var(--ah-signal-ink-muted); }
.ah-changes { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 20px 2px; }
.ah-changes:empty { display: none; }
.ah-change { display: inline-flex; align-items: center; gap: 6px; font: 500 12px / 1 var(--ah-signal-font); font-variant-numeric: tabular-nums; }
.ah-changes .ah-change { padding: 5px 8px; border: var(--ah-hairline) solid rgba(255, 255, 255, 0.1); border-radius: 4px; }
.ah-change.is-up { color: var(--ah-signal-up); }
.ah-change.is-down { color: var(--ah-signal-down); }
.ah-change__label { color: var(--ah-signal-ink-muted); text-transform: uppercase; letter-spacing: var(--ah-tracking-label); font-size: 10px; }
.ah-trace { margin: 14px 20px 6px; }
.ah-trace svg { display: block; width: 100%; height: 56px; overflow: visible; }
.ah-trace polyline { fill: none; stroke: var(--ah-signal-accent); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.ah-trace figcaption { margin-top: 8px; font: 400 10px / 1 var(--ah-signal-font); letter-spacing: var(--ah-tracking-label); text-transform: uppercase; color: var(--ah-signal-ink-faint); }
.ah-facts { display: grid; grid-template-columns: auto 1fr; gap: 9px 16px; margin: 12px 20px 20px; padding-top: 14px; border-top: var(--ah-hairline) solid rgba(255, 255, 255, 0.07); font: 400 12px / 1.25 var(--ah-signal-font); font-variant-numeric: tabular-nums; }
.ah-facts dt { color: var(--ah-signal-ink-muted); }
.ah-facts dd { margin: 0; text-align: right; }
.ah-table { width: calc(100% - 40px); margin: 16px 20px 4px; border-collapse: collapse; font: 400 12px / 1.2 var(--ah-signal-font); font-variant-numeric: tabular-nums; }
.ah-table th, .ah-table td { padding: 9px 0; text-align: right; font-weight: 400; }
.ah-table thead th { padding-top: 0; font-size: 10px; letter-spacing: var(--ah-tracking-label); text-transform: uppercase; color: var(--ah-signal-ink-faint); }
.ah-table tbody th { text-align: left; color: var(--ah-signal-ink-muted); text-transform: uppercase; letter-spacing: var(--ah-tracking-label); }
.ah-table thead th:first-child { text-align: left; }
.ah-table tbody tr + tr > * { border-top: var(--ah-hairline) solid rgba(255, 255, 255, 0.07); }

@media (prefers-reduced-motion: reduce) {
  .ah-signals, .ah-signal__tag { transition: none; }
  .ah-signal.is-open .ah-signal__dot, .ah-panel[data-state="live"] .ah-panel__dot { animation: none; }
}