/* /exchange/:key, /asset/:symbol, /hub and /recent-anomalies (services/seo/hubs.js).
   Library components only (.card / .card-head / .card-body, .card-kpi, .badge, .btn,
   .cta-row, .ark-seg.seg-chips, .tag and the hub FAQ); this file PLACES them and styles
   the page-own pieces (identity row, flow bar, list rows, sparkline). Type sizes follow
   the hub shell (h1, .lede) and the library (card-head h3, card-kpi). Colour = tokens,
   square corners, no gradients, no glows. Replaced the self-contained dark .exr2
   palette (owner 2026-11-01: the exchange page did not switch to light). */

.exh-page .hub-shell { max-width: 1120px; }
.exh { display: flex; flex-direction: column; gap: 14px; padding-bottom: 8px; }
.exh a { text-decoration: none; }
.exh .mat-ic { display: block; flex: none; }

/* Breadcrumb */
.exh-bc { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; color: var(--text-lo); font: 500 12px var(--mono); }
.exh-bc a { color: var(--text-md); }
.exh-bc a:hover { color: var(--text-hi); }
.exh-bc .cur { color: var(--text-hi); }

/* Identity + headline */
.exh-head h1 { margin: 12px 0 8px; }
.exh-head .lede { margin: 0; max-width: 720px; }
.exh-mut { color: var(--text-md); }
.exh-id { display: flex; align-items: center; gap: 12px; }
.exh-id-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.exh-name { color: var(--text-hi); font: 700 13px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.exh-dot { width: 6px; height: 6px; background: currentColor; animation: exh-blink 2.4s infinite; }
@keyframes exh-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.exh-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.exh-actions .btn, .exh-final .btn, .exh-alert .btn { max-width: 100%; height: auto; min-height: 44px; white-space: normal; text-align: center; }

/* Coin / exchange mark: real logo over a letter fallback. */
.exr-ico { position: relative; display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; overflow: hidden; border: 1px solid; font: 800 13px var(--mono); }
.exr-ico img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.exr-ico.is-lg { width: 44px; height: 44px; font-size: 18px; }
.exr-ico.is-sm { width: 18px; height: 18px; font-size: 9px; }

/* Hero: headline left, the 24h flow card right. */
.exh-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.exh-live .card-head .badge { flex: none; }
.exh-net { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.exh-net b { color: var(--text-hi); font: 700 32px var(--mono); letter-spacing: -.04em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.exh-net span { color: var(--text-md); font-size: 14px; }
.exh-net + .badge { margin-top: 10px; }
.exh-bar { display: flex; height: 8px; margin: 16px 0 6px; background: var(--bg-card2); }
.exh-bar i { display: block; height: 100%; }
.exh-bar .on { background: var(--flow-onto); } .exh-bar .off { background: var(--flow-off); }
.exh-bar.is-stable .on { background: var(--bull); } .exh-bar.is-stable .off { background: var(--bear); }
.exh-legend { display: flex; justify-content: space-between; gap: 10px; font: 600 12px var(--mono); }
.exh-legend .on { color: var(--flow-onto); } .exh-legend .off { color: var(--flow-off); text-align: right; }
.exh-legend.is-stable .on { color: var(--bull); } .exh-legend.is-stable .off { color: var(--bear); }
.exh-chart { display: block; width: 100%; height: 88px; margin: 16px 0 6px; }
.exh-chart.is-bear { color: var(--flow-onto); } .exh-chart.is-bull { color: var(--flow-off); }
.exh-chart polygon { fill: currentColor; opacity: .12; }
.exh-chart polyline { fill: none; stroke: currentColor; stroke-width: 2; vector-effect: non-scaling-stroke; }
.exh-axis { display: flex; justify-content: space-between; padding-top: 6px; border-top: 1px solid var(--border); color: var(--text-lo); font: 500 11px var(--mono); }
.exh-label { margin: 16px 0 8px; color: var(--text-lo); font: 600 10px var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.exh-tk { display: flex; align-items: center; gap: 10px; min-height: 32px; transition: opacity .3s; }
.exh-tk-mid { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.exh-tk-amt { color: var(--text-hi); font: 700 13px var(--mono); }
.exh-tk-cp { color: var(--text-md); font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }
.exh-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }

/* Direction mark (arrow in a square), coloured by sentiment. */
.exh-dir { display: grid; place-items: center; flex: none; width: 30px; height: 30px; background: var(--bg-card2); color: var(--text-md); }
.exh-dir.is-bear { color: var(--bear); background: color-mix(in srgb, var(--bear) 12%, var(--bg-card)); }
.exh-dir.is-bull { color: var(--bull); background: color-mix(in srgb, var(--bull) 12%, var(--bg-card)); }

/* Quick stats */
.exh-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.exh-kpis .kpi-label { display: flex; align-items: center; gap: 6px; }
.exh-kpis .kpi-label svg { width: 13px; height: 13px; flex: none; }
.exh-kpis .is-bear .kpi-label svg, .exh-kpis .is-bear .kpi-value { color: var(--bear); }
.exh-kpis .is-bull .kpi-label svg, .exh-kpis .is-bull .kpi-value { color: var(--bull); }
.exh-kpis .is-warn .kpi-label svg { color: var(--warn, #c98a12); }
.exh-kpis .is-accent .kpi-label svg { color: var(--sel-ink); }
.exh-spark { display: block; width: 100%; height: 26px; margin-top: 4px; color: var(--text-lo); }
.exh-spark polyline { fill: none; stroke: currentColor; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.is-bear .exh-spark { color: var(--bear); } .is-bull .exh-spark { color: var(--bull); } .is-warn .exh-spark { color: var(--warn, #c98a12); } .is-accent .exh-spark { color: var(--sel-ink); }

/* Section cards */
.exh-sec { margin: 0; }
.exh-sec .card-head { flex-wrap: wrap; }
.exh-sec .card-head h3 { display: flex; align-items: center; gap: 8px; }
.exh-sec .card-head .btn { margin-left: auto; }
.exh-sub { margin: 0; padding: 12px 16px 0; color: var(--text-md); font-size: 13px; line-height: 1.5; }
.exh-ai-txt { margin: 0; color: var(--text-hi); font-size: 15px; line-height: 1.6; }
.exh-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.exh-tags .tag svg { color: var(--sel-ink); }
.exh-ai-meta { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; color: var(--text-lo); font: 500 11px var(--mono); }
.exh-ai-meta .exh-dot { color: var(--bull); }
.exh-sec .card-body > .btn { margin-top: 14px; }

/* List rows inside a card (assets, exchanges, transfers, reads). */
.exh-rows { margin: 0; padding: 0; list-style: none; }
.exh-rows > * + * { border-top: 1px solid var(--border); }
.exh-rows.is-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.exh-rows.is-grid > * { border-top: 1px solid var(--border); }
.exh-rows.is-grid > :nth-child(-n+2) { border-top: 0; }
.exh-rows.is-grid > :nth-child(2n) { border-left: 1px solid var(--border); }
.exh-row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 16px; color: inherit; }
a.exh-row:hover, .exh-row[data-href]:hover { background: var(--sel-hover); cursor: pointer; }
.exh-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.exh-row-mid { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.exh-row-top { display: flex; align-items: baseline; gap: 8px; }
.exh-row-top b { color: var(--text-hi); font: 700 14px var(--mono); }
.exh-row-top .exh-val { margin-left: auto; }
.exh-val { color: var(--text-hi); font: 700 14px var(--mono); white-space: nowrap; font-variant-numeric: tabular-nums; }
.exh-go { width: 18px; height: 18px; color: var(--text-lo); }
.exh-row .exh-bar { height: 5px; margin: 0; }
.exh-row .exh-legend { font-size: 11px; font-weight: 500; }

/* Transfer row: mark, asset, direction badge, counterparty, value, time. */
.exh-move-as { width: 56px; flex: none; color: var(--text-hi); font: 700 13px var(--mono); }
.exh-move-cp { flex: 1 1 0; min-width: 0; color: var(--text-md); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exh-move-cp a { color: var(--text-hi); text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 3px; }
.exh-move-cp a:hover { text-decoration-color: currentColor; }
.exh-move-t { min-width: 34px; flex: none; color: var(--text-lo); font: 500 11px var(--mono); text-align: right; }

/* Read rows (analyst calls) */
.exh-read { display: flex; flex-direction: column; gap: 3px; padding: 12px 16px; color: inherit; }
.exh-read:hover { background: var(--sel-hover); }
.exh-read b { color: var(--text-hi); font-size: 14px; font-weight: 600; line-height: 1.4; }
.exh-read span { color: var(--text-md); font-size: 12px; }

/* Link groups (other exchanges, assets, directory) */
.exh-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.exh-links-lbl { color: var(--text-md); font-size: 13px; margin-right: 2px; }
.exh-links .btn svg { width: 16px; height: 16px; flex: none; color: var(--sel-ink); }

/* Alerts card */
.exh-alert .card-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 300px); gap: 20px; align-items: center; }
.exh-alert h2 { margin: 10px 0 6px; font-size: 17px; }
.exh-alert p { margin: 0; color: var(--text-md); font-size: 13.5px; line-height: 1.5; }
.exh-alert-r { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.exh-alert-r .ark-seg-btn svg { width: 15px; height: 15px; flex: none; }

/* Final call to action */
.exh-final .card-body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.exh-final h2 { margin: 0; font-size: 17px; }
.exh-final p { margin: 0; max-width: 620px; color: var(--text-md); font-size: 13.5px; line-height: 1.5; }
.exh-trust { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--text-md); font: 500 12px var(--mono); }
.exh-trust span { display: inline-flex; align-items: center; gap: 6px; }
.exh-trust svg { color: var(--bull); }

.exh .hub-faq { margin: 6px 0 0; }
.exh-empty { padding: 20px 16px; color: var(--text-md); font-size: 13px; text-align: center; }

@media (max-width: 860px) {
  .exh-hero { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .exh-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .exh-rows.is-grid { grid-template-columns: minmax(0, 1fr); }
  .exh-rows.is-grid > :nth-child(2) { border-top: 1px solid var(--border); }
  .exh-rows.is-grid > :nth-child(2n) { border-left: 0; }
  .exh-alert .card-body { grid-template-columns: minmax(0, 1fr); }
  /* The counterparty is the row's payoff: give it its own wrapped line. */
  .exh-row.is-move { flex-wrap: wrap; row-gap: 4px; padding: 10px 12px; }
  .exh-row.is-move .exh-move-cp { order: 6; flex: 1 1 100%; padding-left: 42px; white-space: normal; }
  .exh-row.is-move .exh-val { margin-left: auto; }
}
@media (max-width: 420px) {
  .exh-net b { font-size: 28px; }
  .exh-actions .btn-primary { flex: 1 1 100%; }
  .exh-final .btn { align-self: stretch; }
  .exh-row { padding-left: 12px; padding-right: 12px; }
}

/* /recent-anomalies: live feed card, one row per anomaly (js/anomaly-live-feed.js
   prepends rows with the same classes). */
.live-feed { margin-top: 12px; }
.lf-head .badge { flex: none; }
.lf-live { display: inline-flex; align-items: center; gap: 6px; }
.lf-live .exh-dot { color: var(--bull); }
.lf-waiting { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); color: var(--text-md); font: 500 11.5px var(--mono); }
.lf-bounce { display: inline-flex; gap: 3px; }
.lf-bounce i { width: 4px; height: 4px; background: currentColor; opacity: .45; animation: lf-bounce 1.2s ease-in-out infinite; }
.lf-bounce i:nth-child(2) { animation-delay: .15s; }
.lf-bounce i:nth-child(3) { animation-delay: .3s; }
@keyframes lf-bounce { 0%, 100% { transform: translateY(0); opacity: .35; } 50% { transform: translateY(-3px); opacity: 1; } }
.lf-list { display: flex; flex-direction: column; }
.lf-row { position: relative; display: grid; grid-template-columns: 3px 52px 150px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 52px; padding: 10px 16px 10px 0; border-top: 1px solid var(--border); color: inherit; text-decoration: none; }
.lf-list > .lf-row:first-child { border-top: 0; }
.lf-row:hover { background: var(--sel-hover); }
.lf-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.lf-bar { width: 3px; height: 100%; align-self: stretch; }
.lf-time { padding-left: 12px; color: var(--text-md); font: 500 12px var(--mono); }
.lf-tag { justify-self: start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lf-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; color: var(--text-hi); font-size: 13.5px; line-height: 1.45; }
.lf-amt { color: var(--text-hi); font-weight: 600; white-space: nowrap; }
.lf-amt strong { font-weight: 700; }
.lf-side { color: var(--text-md); overflow-wrap: anywhere; }
.lf-arrow { color: var(--text-lo); font-family: var(--mono); }
.lf-ico-asset, .lf-ico-cex { width: 18px; height: 18px; flex: none; object-fit: contain; }
.lf-usd { color: var(--text-hi); font: 700 14px var(--mono); white-space: nowrap; }
.lf-empty { padding: 36px; color: var(--text-lo); font: 500 12px var(--mono); text-align: center; }
.lf-row.lf-new { animation: lf-row-in .42s ease-out both; }
@keyframes lf-row-in { from { opacity: 0; transform: translateY(-6px); background: var(--sel-fill); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 720px) {
  .lf-row { grid-template-columns: 3px 44px minmax(0, 1fr) auto; gap: 8px 10px; padding-right: 12px; }
  .lf-row .lf-tag { grid-column: 3; }
  .lf-row .lf-usd { grid-column: 4; grid-row: 1; }
  .lf-row .lf-flow { grid-column: 2 / -1; grid-row: 2; padding-left: 12px; font-size: 13px; }
  .lf-row .lf-bar { grid-row: 1 / span 2; }
}
@media (prefers-reduced-motion: reduce) {
  .exh-dot, .lf-bounce i, .lf-row.lf-new { animation: none !important; }
}