/**
 * ZeroSpread — shared product-tool chrome.
 * Scoped to financial tool shells only. No marketing/editorial bleed.
 * Light defaults stay on --zs-light-* constants. Dark remaps live in
 * `dark-mode-contract.css` under `html:not(.light)` so Light Mode does not change.
 */

:is(
  .crypto-all-coins-page,
  .marketOverviewPage,
  .zs-charts-page,
  .zsTradingPanel,
  .zsWl,
  .ntfShell,
  .altShell,
  .recShell,
  .ecdShell,
  .mrdShell
) {
  --zs-product-gutter: 24px;
  --zs-product-radius: var(--zs-radius-md, 10px);
  --zs-product-border: var(--zs-light-border, #e5e7eb);
  --zs-product-canvas: var(--zs-light-bg, #f7f8f5);
  --zs-product-surface: var(--zs-light-surface, #ffffff);
  --zs-product-summary: var(--zs-light-surface-soft, #f4f6f2);
  --zs-product-hover: #f8f9fa;
}

@media (min-width: 1024px) {
  .crypto-all-coins-page .crypto-all-coins-wrapper {
    padding-inline: var(--zs-product-gutter, 24px);
  }

  [data-zs-page='markets-overview'] .zs-mkt-page-inner,
  [data-zs-page='markets-overview'] .mo-overview-shell {
    padding-inline: var(--zs-product-gutter, 24px);
  }
}

/* Financial figures — inherit product UI font, tabular, LTR isolate */
.crypto-all-coins-page .all-coins-terminal-num,
.crypto-all-coins-page .all-coins-terminal-chg,
.crypto-all-coins-page .all-coins-terminal-card-price,
.crypto-all-coins-page .all-coins-terminal-card-pct,
.crypto-discovery-hub--sectors-view .csd-overview-kpi-value,
.crypto-discovery-hub--sectors-view .csd-kpi-value,
.crypto-discovery-hub--sectors-view .csd-traded-price,
.crypto-discovery-hub--sectors-view .csd-traded-chg,
.zsTradingPanel [dir='ltr'],
.zsWl [dir='ltr'] {
  font-variant-numeric: tabular-nums;
  font-family: inherit;
}

/* Control hover / focus — no behavior change */
.crypto-all-coins-page .all-coins-terminal-tab:focus-visible,
.crypto-discovery-hub--sectors-view .csd-chip:focus-visible {
  outline: 2px solid var(--zs-light-text, #0f172a);
  outline-offset: 2px;
}

html:not(.light) .crypto-all-coins-page .all-coins-terminal-tab:focus-visible,
html:not(.light) .crypto-discovery-hub--sectors-view .csd-chip:focus-visible,
html:not(.light) .crypto-all-coins-page .all-coins-terminal-grid-row--data:focus-visible,
html:not(.light) .crypto-discovery-hub--sectors-view .csd-traded-row:focus-visible {
  outline-color: var(--zs-text-primary, #f5f7fa);
}

.crypto-all-coins-page .all-coins-terminal-tab,
.crypto-discovery-hub--sectors-view .csd-chip,
.crypto-all-coins-page .all-coins-terminal-search {
  cursor: pointer;
}

.crypto-all-coins-page .all-coins-terminal-search {
  cursor: text;
}

.crypto-all-coins-page .all-coins-terminal-grid-row--data:hover,
.crypto-discovery-hub--sectors-view .csd-traded-row:hover {
  background: var(--zs-product-hover, #f8f9fa);
}

.crypto-all-coins-page .all-coins-terminal-grid-row--data:focus-visible,
.crypto-discovery-hub--sectors-view .csd-traded-row:focus-visible {
  outline: 2px solid var(--zs-light-text, #0f172a);
  outline-offset: -2px;
}

/* Compact product icons inside tool panels (not the title cluster) */
.zsTradingPanel svg,
.zsWl svg,
.ntfShell header svg,
.altShell header svg,
.recShell header svg,
.ecdShell header svg,
.mrdShell header svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.75;
  flex-shrink: 0;
}

/**
 * Light-mode positive FINANCIAL TEXT.
 * Visualization/fills stay on --zs-success (#18C37E).
 * Brand stays --zs-green-primary (#A3FF12).
 */

html.light {
  --zs-success-text: var(--zs-success-text-light, #15803d);
  --zs-success-text-strong: var(--zs-success-text-light-strong, #166534);
  --crypto-fin-up: var(--zs-success-text-light, #15803d);
  --ac-positive: var(--zs-success-text-light, #15803d);
  --crypto-coll-ok: var(--zs-success-text-light, #15803d);
}

html.light .is-up,
html.light .is-positive,
html.light .crypto-discovery-hub .is-up,
html.light .crypto-discovery-hub .is-positive,
html.light .crypto-all-coins-page .is-up,
[data-zs-crypto-root][data-zs-theme='light'] .is-up,
[data-zs-crypto-root][data-zs-theme='light'] .is-positive,
[data-zs-crypto-root][data-zs-theme='light'] .crypto-discovery-hub .is-up {
  color: var(--zs-success-text-light, #15803d) !important;
}

html.light .is-up:hover,
html.light a.is-up:hover,
html.light button.is-up:hover,
html.light .crypto-discovery-hub .is-up:hover,
html.light .crypto-all-coins-page .is-up:hover,
[data-zs-crypto-root][data-zs-theme='light'] .is-up:hover {
  color: var(--zs-success-text-light-strong, #166534) !important;
}