/* Reusable controls ------------------------------------------------------- */

:where(
  .button,
  .button-primary,
  .button-secondary,
  .icon-button,
  .mobile-menu-toggle,
  .wallet-button,
  .trade-review-button,
  .trade-confirm-button,
  .trade-cancel-button,
  .modal-close,
  .hash-button
) {
  --control-background: var(--color-control-bg);
  --control-background-hover: var(--color-control-bg-hover);
  --control-background-active: var(--color-surface-active);
  --control-foreground: var(--color-control-text);
  --control-border: var(--color-control-border);
  --control-border-hover: var(--color-control-border-hover);
  --control-loading-color: var(--color-text);
  position: relative;
  display: inline-flex;
  min-block-size: var(--size-control-sm);
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding-block: var(--space-2);
  padding-inline: var(--space-5);
  border: var(--border-width) solid var(--control-border);
  border-radius: var(--radius-pill);
  background: var(--control-background);
  color: var(--control-foreground);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-none);
  letter-spacing: -0.01em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: var(--transition-colors), var(--transition-transform);
}

:where(
  .button,
  .button-primary,
  .button-secondary,
  .icon-button,
  .mobile-menu-toggle,
  .wallet-button,
  .trade-review-button,
  .trade-confirm-button,
  .trade-cancel-button,
  .modal-close,
  .hash-button
) :where(svg, .icon) {
  flex: none;
}

/* The ONE accent fill per view. Accent rationing: fill = primary action,
   ring = current selection, ink = live data and positive values. */
:where(.button--primary, .button-primary, .trade-review-button, .trade-confirm-button) {
  --control-background: var(--gradient-accent);
  --control-background-hover: var(--color-accent-hover);
  --control-background-active: var(--color-accent-active);
  --control-foreground: var(--color-on-accent);
  --control-border: var(--color-accent);
  --control-border-hover: var(--color-accent-hover);
  --control-loading-color: var(--color-on-accent);
  box-shadow: none;
}

.button--primary {
  color: var(--color-on-accent);
}

/* Secondary is a flat control, not a small card: no sheen, no inset. */
:where(.button--secondary, .button-secondary, .trade-cancel-button) {
  --control-background: var(--color-surface-elevated);
  --control-background-hover: var(--color-surface-hover);
  --control-background-active: var(--color-surface-active);
  --control-border: var(--color-border);
  --control-border-hover: var(--color-border-strong);
  box-shadow: none;
}

:where(.button--ghost, .button--text, .icon-button, .mobile-menu-toggle, .modal-close, .hash-button) {
  --control-background: transparent;
  --control-background-hover: var(--color-surface-hover);
  --control-background-active: var(--color-surface-active);
  --control-border: transparent;
  --control-border-hover: var(--color-border);
  box-shadow: none;
}

.button--text {
  min-block-size: var(--size-touch-min);
  padding-inline: var(--space-2);
  color: var(--color-text-secondary);
}

.button--sm {
  min-block-size: var(--size-control-sm);
  padding-inline: var(--space-4);
  font-size: var(--text-xs);
}

.button--lg {
  min-block-size: var(--size-control-lg);
  padding-inline: var(--space-6);
  font-size: var(--text-md);
}

.button--block {
  inline-size: 100%;
}

:where(.icon-button, .mobile-menu-toggle, .modal-close) {
  inline-size: var(--size-touch-min);
  padding: var(--space-0);
  font-size: var(--text-xl);
}

@media (hover: hover) {
  :where(
    .button,
    .button-primary,
    .button-secondary,
    .icon-button,
    .mobile-menu-toggle,
    .wallet-button,
    .trade-review-button,
    .trade-confirm-button,
    .trade-cancel-button,
    .modal-close,
    .hash-button
  ):where(:not(:disabled):not([aria-disabled="true"])):hover {
    border-color: var(--control-border-hover);
    background: var(--control-background-hover);
    color: var(--control-foreground);
    transform: translateY(calc(var(--space-1) * -1));
  }
}

:where(
  .button,
  .button-primary,
  .button-secondary,
  .icon-button,
  .mobile-menu-toggle,
  .wallet-button,
  .trade-review-button,
  .trade-confirm-button,
  .trade-cancel-button,
  .modal-close,
  .hash-button
):where(:not(:disabled):not([aria-disabled="true"])):active {
  background: var(--control-background-active);
  transform: translateY(var(--space-0)) scale(0.985);
}

:where(
  .button,
  .button-primary,
  .button-secondary,
  .icon-button,
  .mobile-menu-toggle,
  .wallet-button,
  .trade-review-button,
  .trade-confirm-button,
  .trade-cancel-button,
  .modal-close,
  .hash-button,
  .markets-filter-chip,
  .trade-side-tab,
  .strategy-option,
  .quick-amount,
  .period-button,
  .filter-tab,
  .tab,
  .segmented-control__button,
  .info-tip__trigger
):focus-visible {
  outline: none;
  border-color: var(--color-control-border-focus);
  box-shadow: var(--shadow-focus);
}

:where(
  .button,
  .button-primary,
  .button-secondary,
  .icon-button,
  .mobile-menu-toggle,
  .wallet-button,
  .trade-review-button,
  .trade-confirm-button,
  .trade-cancel-button,
  .modal-close,
  .hash-button,
  .markets-filter-chip,
  .trade-side-tab,
  .strategy-option,
  .quick-amount,
  .period-button,
  .filter-tab,
  .tab,
  .segmented-control__button
):is(:disabled, [aria-disabled="true"]) {
  border-color: var(--color-border-subtle);
  background: var(--color-control-bg-disabled);
  color: var(--color-text-disabled);
  cursor: not-allowed;
  box-shadow: none;
}

:where(
  .button,
  .wallet-button,
  .trade-review-button,
  .trade-confirm-button
):where(.is-loading, [aria-busy="true"]),
.wallet-button[data-state="connecting"],
.trade-confirm-button:disabled {
  color: transparent;
  pointer-events: none;
}

.trade-confirm-button:disabled,
.wallet-button.button--primary[data-state="connecting"] {
  border-color: var(--color-border-accent);
  background: var(--gradient-accent);
  box-shadow: var(--shadow-accent), var(--shadow-inset);
}

:where(
  .button,
  .wallet-button,
  .trade-review-button,
  .trade-confirm-button
):where(.is-loading, [aria-busy="true"])::after,
.wallet-button[data-state="connecting"]::after,
.trade-confirm-button:disabled::after {
  position: absolute;
  inline-size: var(--size-icon-sm);
  block-size: var(--size-icon-sm);
  border: var(--border-width-strong) solid var(--color-border-strong);
  border-block-start-color: var(--control-loading-color);
  border-radius: var(--radius-pill);
  content: "";
  animation: component-spin var(--duration-slower) var(--ease-linear) infinite;
}

/* Chips, badges and plain-language strategy labels ----------------------- */

:where(
  .chip,
  .badge,
  .preview-badge,
  .preview-pill,
  .detail-badge,
  .risk-badge,
  .status-badge,
  .network-pill,
  .strategy-pill
) {
  display: inline-flex;
  min-block-size: var(--space-7);
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-1);
  padding-inline: var(--space-3);
  border: var(--border-subtle);
  border-radius: var(--radius-pill);
  background: var(--color-surface-elevated);
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-none);
  white-space: nowrap;
}

:where(.preview-badge, .preview-pill, .detail-badge.is-preview, .status-badge[data-status="preview"], .status-badge[data-status="absent"]) {
  border-color: var(--color-info-border);
  background: var(--color-info-soft);
  color: var(--color-info);
  letter-spacing: var(--tracking-wide);
}

.strategy-pill {
  border-color: var(--color-border-strong);
  background: var(--color-surface-high);
  color: var(--color-text);
}

.strategy-pill--yield {
  border-color: var(--color-info-border);
  background: var(--color-info-soft);
}

.strategy-pill__label {
  color: var(--color-text);
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
}

:where(.strategy-pill__token, .strategy-pill small, .technical-label) {
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-wide);
}

.strategy-pill--compact {
  min-block-size: var(--space-6);
  padding-inline: var(--space-2);
}

.risk-badge__label {
  color: var(--color-text-secondary);
}

.risk-badge__code {
  padding-inline-start: var(--space-1);
  border-inline-start: var(--border-subtle);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-weight: var(--weight-regular);
}

:where(.risk-badge--low, .status-badge[data-status="completed"], .status-badge[data-status="success"], .status-badge[data-status="live"]) {
  border-color: var(--color-success-border);
  background: var(--color-success-soft);
  color: var(--color-success);
}

:where(.risk-badge--medium, .status-badge[data-status="pending"], .status-badge[data-status="processing"], .status-badge[data-status="stale"]) {
  border-color: var(--color-warning-border);
  background: var(--color-warning-soft);
  color: var(--color-warning);
}

:where(.risk-badge--high, .status-badge[data-status="failed"], .status-badge[data-status="error"], .status-badge[data-status="halted"]) {
  border-color: var(--color-error-border);
  background: var(--color-error-soft);
  color: var(--color-error);
}

.status-dot,
.network-dot {
  inline-size: var(--space-2);
  block-size: var(--space-2);
  flex: none;
  border-radius: var(--radius-pill);
  background: currentColor;
  box-shadow: 0 0 0 var(--space-1) var(--color-highlight);
}

/* Interactive chips, tabs and segmented controls ------------------------ */

.markets-filter-chip {
  display: inline-flex;
  min-block-size: var(--size-touch-min);
  align-items: center;
  justify-content: center;
  padding-inline: var(--space-4);
  border: var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--color-control-bg);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-none);
  white-space: nowrap;
  cursor: pointer;
  transition: var(--transition-colors);
}

@media (hover: hover) {
  .markets-filter-chip:not(:disabled):hover {
    border-color: var(--color-control-border-hover);
    background: var(--color-control-bg-hover);
    color: var(--color-text);
  }
}

/* Selection is an accent tint plus an accent hairline — never an inversion to a
   white slab. That inversion was the only emphasis device this design had, and
   it is what made every page read as flat black punctuated by harsh white.
   Deliberately flat: no gradient and no ring, so a filter chip stays a dense
   control rather than becoming a little card. */
.markets-filter-chip:is(.is-active, [aria-pressed="true"]) {
  border-color: var(--color-border-accent);
  background: var(--color-accent-soft);
  color: var(--color-text);
}

/* Segmented track: a flat recessed rail. Its selected item steps UP the surface
   ramp rather than lifting off it, which keeps these controls dense. */
:where(.tabs, .filter-tabs, .period-selector, .segmented-control, .trade-side-tabs) {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1);
  border: var(--border-subtle);
  border-radius: var(--radius-control);
  background: var(--color-bg-raised);
}

:where(.tab, .filter-tab, .period-button, .segmented-control__button, .trade-side-tab) {
  display: inline-flex;
  min-block-size: var(--size-touch-min);
  align-items: center;
  justify-content: center;
  padding-inline: var(--space-4);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-none);
  white-space: nowrap;
  cursor: pointer;
  transition: var(--transition-colors);
}

@media (hover: hover) {
  :where(.tab, .filter-tab, .period-button, .segmented-control__button, .trade-side-tab):not(:disabled):hover {
    background: var(--color-surface-hover);
    color: var(--color-text);
  }
}

:where(.tab, .filter-tab, .period-button, .segmented-control__button, .trade-side-tab):is(
  .is-active,
  [aria-selected="true"],
  [aria-pressed="true"],
  [aria-checked="true"]
) {
  border-color: var(--color-border);
  background: var(--color-surface-active);
  color: var(--color-text);
}

.strategy-selector {
  display: grid;
  gap: var(--space-3);
  min-inline-size: var(--space-0);
  padding: var(--space-0);
  border: 0;
}

.strategy-selector legend {
  margin-block-end: var(--space-3);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.strategy-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  align-items: start;
  gap: var(--space-2);
  inline-size: 100%;
  min-block-size: var(--size-control-lg);
  padding: var(--space-4);
  overflow-wrap: anywhere;
  border: var(--border-default);
  border-radius: var(--radius-md);
  background: var(--color-surface-elevated);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
  text-align: start;
  white-space: normal;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: var(--transition-colors);
}

@media (hover: hover) {
  .strategy-option:not(:disabled):hover {
    border-color: var(--color-control-border-hover);
    background: var(--color-control-bg-hover);
  }
}

.strategy-option:is(.is-active, [aria-pressed="true"]) {
  border-color: var(--color-border-accent);
  background: var(--color-accent-soft);
  color: var(--color-text);
}

.strategy-option-label {
  color: var(--color-text);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}

.strategy-option-token {
  margin-inline-start: var(--space-1);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-wide);
}

.strategy-option:is(.is-active, [aria-pressed="true"]) :is(
  .strategy-option-label,
  .strategy-option-description
) {
  color: var(--color-text);
}

.strategy-option:is(.is-active, [aria-pressed="true"]) .strategy-option-token {
  color: var(--color-accent);
}

.strategy-option-description {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.strategy-option > span {
  min-inline-size: 0;
  max-inline-size: 100%;
  white-space: normal;
}

/* Asset marks ------------------------------------------------------------ */

.asset-mark {
  position: relative;
  display: inline-grid;
  inline-size: var(--asset-mark-size, var(--size-control-sm));
  block-size: var(--asset-mark-size, var(--size-control-sm));
  flex: none;
  place-items: center;
  overflow: hidden;
  border: var(--border-default);
  border-radius: var(--radius-md);
  background: var(--color-surface-elevated);
  box-shadow: var(--shadow-xs);
  isolation: isolate;
}

.asset-mark__initials {
  position: relative;
  z-index: var(--z-base);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--color-surface-glass);
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-size: clamp(var(--text-xs), calc(var(--asset-mark-size, var(--size-control-sm)) / 3), var(--text-md));
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-snug);
  line-height: var(--leading-none);
  box-shadow: var(--shadow-xs);
}

.asset-mark__logo {
  position: absolute;
  inset: var(--space-0);
  z-index: var(--z-sticky);
  display: block;
  inline-size: 100%;
  block-size: 100%;
  padding: 12%;
  box-sizing: border-box;
  border-radius: inherit;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

@media (prefers-contrast: more) {
  .asset-mark {
    border-color: var(--color-text-secondary);
    box-shadow: none;
  }
}

@media (forced-colors: active) {
  .asset-mark {
    border: var(--border-width-strong) solid CanvasText;
    background: Canvas;
    color: CanvasText;
    box-shadow: none;
  }

  .asset-mark__logo {
    forced-color-adjust: none;
  }
}

/* Stat blocks ------------------------------------------------------------ */

:where(.stat-block, .stat-card, .market-stat) {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  min-inline-size: var(--space-0);
}

.stat-block {
  padding-block: var(--space-3);
  padding-inline: var(--space-4);
  border-inline-start: var(--border-strong);
}

/* Type hierarchy: a label RECEDES (small, uppercase, mono, letterspaced,
   subtle) so the value can ADVANCE (mono tabular, semibold, tight). Measured
   before this, 81% of visible text on the home screen was a single weight. */
:where(.stat-block__label, .stat-card :where(dt, span:first-child), .market-stat dt) {
  color: var(--color-text-subtle);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  line-height: var(--leading-snug);
  text-transform: uppercase;
}

:where(.stat-block__value, .stat-card dd, .stat-card > strong, .market-stat dd) {
  margin: var(--space-0);
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

:where(.stat-block__meta, .stat-card small, .market-stat small) {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
}

.stat-block--positive .stat-block__value,
.change.is-positive {
  color: var(--color-success);
}

.stat-block--negative .stat-block__value,
.change.is-negative {
  color: var(--color-error);
}

.stat-block--accent .stat-block__value {
  color: var(--color-accent);
}

.stat-block--warning .stat-block__value {
  color: var(--color-warning);
}

.change {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.change span {
  color: var(--color-text-muted);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
}

/* Cards and reusable market surfaces ------------------------------------ */

:where(
  .card,
  .market-card,
  .spotlight-card,
  .strategy-choice-card,
  .opportunity-card,
  .related-card,
  .allocation-card,
  .lesson-card
) {
  border: var(--border-default);
  border-radius: var(--radius-card);
  background: var(--surface-card);
  color: var(--color-text);
  box-shadow: var(--shadow-xs);
}

.card {
  padding: var(--space-6);
}

:where(.spotlight-card, .strategy-choice-card, .opportunity-card, .related-card, .allocation-card, .lesson-card) {
  padding: var(--space-7);
}

:where(a.card, button.card, .card--interactive, .market-card, a.related-card) {
  transition: var(--transition-colors), var(--transition-transform), box-shadow var(--duration-base) var(--ease-out);
}

@media (hover: hover) {
  :where(a.card, button.card, .card--interactive, .market-card, a.related-card):hover {
    border-color: var(--color-border-strong);
    background: var(--gradient-surface-hover);
    box-shadow: var(--shadow-md);
    transform: translateY(calc(var(--space-1) * -1));
  }
}

:where(a.card, button.card, .card--interactive, .market-card, .spotlight-card, a.related-card):focus-visible,
:where(.market-card, .spotlight-card):focus-within {
  outline: none;
  border-color: var(--color-control-border-focus);
  box-shadow: var(--shadow-focus);
}

.market-card {
  overflow: hidden;
}

.market-card__link {
  display: grid;
  gap: var(--space-5);
  block-size: 100%;
  padding: var(--space-5);
  color: inherit;
  text-decoration: none;
}

.market-card__header,
.market-card__identity,
.spotlight-card__top,
.strategy-choice-card__header,
.opportunity-card-heading,
.related-card-heading {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.market-card__header,
.spotlight-card__top,
.opportunity-card-heading {
  justify-content: space-between;
}

.market-card__identity {
  min-inline-size: var(--space-0);
}

.market-card__name,
.strategy-choice-card__title {
  margin: var(--space-0);
  color: var(--color-text);
  font-size: var(--text-md);
  line-height: var(--leading-snug);
}

.market-card__identity p {
  margin-block-start: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.market-card__ticker {
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
}

/* Affordance arrows are not live data — they were only ever "bright", which is
   all --color-accent meant while it was #ffffff. */
.market-card__arrow,
.related-link {
  color: var(--color-text-subtle);
  transition: var(--transition-transform);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .market-card:hover .market-card__arrow,
  .related-card:hover .related-link {
    transform: translateX(var(--space-1));
  }
}

.market-card__metrics,
.opportunity-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin: var(--space-0);
}

.market-card__metric,
.opportunity-metrics > div {
  display: grid;
  gap: var(--space-1);
}

.market-card__metric dt,
.opportunity-metrics dt {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.market-card__metric dd,
.opportunity-metrics dd {
  margin: var(--space-0);
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: var(--text-md);
  font-variant-numeric: tabular-nums;
}

/* These slots can legitimately hold "Not yet quoted" or "No dividend", so they
   MUST NOT wear the live-data accent — a green "Not yet quoted" would claim
   liveness for a figure that does not exist. A figure reads as a figure from
   the mono tabular treatment, not from colour. */
.spotlight-card__metric,
.opportunity-rate,
.related-rate {
  color: var(--color-text);
}

.market-card__footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  padding-block-start: var(--space-4);
  border-block-start: var(--border-subtle);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.strategy-choice-card {
  display: grid;
  align-content: start;
  gap: var(--space-5);
  min-block-size: 31rem;
  padding: var(--space-8);
}


.strategy-choice-card__description,
.opportunity-card > p {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.strategy-choice-card__facts,
.strategy-choice-card__example {
  padding-block-start: var(--space-4);
  border-block-start: var(--border-subtle);
}

.opportunity-card {
  display: grid;
  gap: var(--space-5);
}

/* The inverted emphasis card. Every value here comes from the on-light ladder:
   hardcoded near-blacks were what let a specificity tie render this card's ink
   on a dark background. A light surface takes its shading on the BOTTOM edge. */
.opportunity-card.is-fixed {
  border-color: var(--color-surface-inverse);
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
  box-shadow: var(--edge-specular-inverse);
}

.opportunity-card.is-dividend {
  border-color: var(--color-info-border);
}

.opportunity-card.is-fixed :is(h3, .opportunity-rate, .opportunity-metrics dd) {
  color: var(--color-text-inverse);
}

.opportunity-card.is-fixed :is(
  .strategy-kicker,
  .opportunity-rate small,
  .opportunity-metrics dt
) {
  color: var(--color-text-inverse-muted);
}

.opportunity-card.is-fixed > p {
  color: var(--color-text-inverse-secondary);
}

.opportunity-card.is-fixed .technical-label {
  border-color: var(--color-border-inverse);
  color: var(--color-text-inverse-muted);
}

.strategy-kicker {
  color: var(--color-text-subtle);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.opportunity-rate {
  display: grid;
  justify-items: end;
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-medium);
}

.opportunity-rate small,
.related-rate small {
  color: var(--color-text-muted);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
}

.related-card {
  display: grid;
  gap: var(--space-5);
  color: inherit;
  text-decoration: none;
}

.related-card-heading span:last-child {
  display: grid;
  gap: var(--space-1);
}

.related-card-heading small {
  color: var(--color-text-muted);
}

.related-rate {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-lg);
}

.hero-market-card__asset,
.spotlight-card__identity {
  display: flex;
  min-inline-size: var(--space-0);
  align-items: center;
  gap: var(--space-3);
}

:where(.hero-market-card__asset, .spotlight-card__identity) > div {
  display: grid;
  min-inline-size: var(--space-0);
  gap: var(--space-1);
}

:where(.hero-market-card__asset, .spotlight-card__identity) small,
:where(.hero-market-card__asset, .spotlight-card__identity) span:not(.asset-mark, .asset-mark *) {
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.spotlight-card {
  display: grid;
  align-content: start;
  gap: var(--space-5);
}

.spotlight-card__identity > div > span {
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.spotlight-card__title {
  margin: var(--space-0);
  color: var(--color-text);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
}

.spotlight-card__metric {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  padding-block: var(--space-4);
  border-block: var(--border-subtle);
}

.spotlight-card__metric > strong {
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: var(--text-3xl);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-none);
}

.spotlight-card__metric > small {
  grid-column: 2;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  text-align: end;
}

.spotlight-card__secondary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.spotlight-card__secondary > span {
  font-variant-numeric: tabular-nums;
}

.spotlight-card__secondary strong {
  color: var(--color-text);
}

.asset-fundamentals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto auto auto;
  gap: var(--space-2) var(--space-5);
  margin: 0;
  padding-block: var(--space-4);
  border-block: var(--border-subtle);
}

.asset-fundamentals__item {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  gap: var(--space-1);
  min-inline-size: 0;
}

.asset-fundamentals__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-text-muted);
}

.asset-fundamentals__value {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  line-height: var(--leading-tight);
  color: var(--color-text);
}

.asset-fundamentals__note {
  margin: 0;
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--color-text-muted);
  text-wrap: pretty;
}

.asset-fundamentals--hero {
  text-align: start;
}

.hero-choice-row--reference {
  text-align: start;
}

.spotlight-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-block-start: auto;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.spotlight-card__footer > span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}


.strategy-choice-card__icon {
  display: inline-grid;
  inline-size: var(--size-control-sm);
  block-size: var(--size-control-sm);
  flex: none;
  place-items: center;
  border: var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--color-surface-elevated);
  color: var(--color-text-secondary);
}

.strategy-choice-card__facts {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-0);
}

.strategy-choice-card__facts > div {
  display: grid;
  gap: var(--space-1);
}

.strategy-choice-card__facts dt {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.strategy-choice-card__facts dd,
.strategy-choice-card__example {
  margin: var(--space-0);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.strategy-choice-card__example strong {
  color: var(--color-text);
}



.risk-item {
  padding-block: var(--space-4);
  border-block-start: var(--border-subtle);
}

.risk-item h3 {
  margin-block-end: var(--space-2);
  color: var(--color-text);
  font-size: var(--text-sm);
}

.risk-item p,
.risk-item small {
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
}

.risk-item small {
  display: block;
  margin-block-start: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

/* Data tables ------------------------------------------------------------ */

:where(.table-scroll, .markets-table-wrap, .data-table-wrap) {
  overflow-x: auto;
  border: var(--border-default);
  border-radius: var(--radius-card);
  background: var(--surface-card);
  box-shadow: var(--shadow-xs);
  overscroll-behavior-inline: contain;
  scrollbar-color: var(--color-border-strong) transparent;
}

:where(.data-table, .markets-table) {
  inline-size: 100%;
  border-collapse: collapse;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

:where(.data-table, .markets-table) th,
:where(.data-table, .markets-table) td {
  padding-block: var(--space-4);
  padding-inline: var(--space-5);
  border-block-end: var(--border-subtle);
  text-align: start;
  vertical-align: middle;
}

:where(.data-table, .markets-table) thead th {
  background: var(--color-bg-raised);
  color: var(--color-text-subtle);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  white-space: nowrap;
}

:where(.data-table, .markets-table) tbody tr {
  transition: var(--transition-colors);
}

@media (hover: hover) {
  :where(.data-table, .markets-table) tbody tr:hover {
    background: var(--color-surface-hover);
  }
}

:where(.data-table, .markets-table) tbody tr:focus-within {
  background: var(--color-accent-softer);
  box-shadow: inset var(--border-width-strong) 0 0 var(--color-accent);
}

:where(.data-table, .markets-table) tbody tr:last-child > * {
  border-block-end: 0;
}

:where(.data-table, .markets-table) :where([data-numeric], .numeric, td:not(:first-child)) {
  font-variant-numeric: tabular-nums;
}

.markets-table__row[data-route] {
  cursor: pointer;
}

.markets-table__asset {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: inherit;
  text-decoration: none;
}

.markets-table__asset > span {
  display: grid;
  gap: var(--space-1);
}

.markets-table__asset strong,
.markets-table__primary,
.markets-table__return {
  color: var(--color-text);
  font-weight: var(--weight-semibold);
}

/* markets.js reuses this one class for BOTH the live price cell (which may read
   "Not yet quoted" — 6 of 12 markets today) and the derived rate cell. One
   class cannot mean "live" for one row and "absent" for the next, so it stays
   neutral. Liveness is carried by the real text in the adjacent <small>. */
.markets-table__return {
  color: var(--color-text);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.markets-table small {
  display: block;
  margin-block-start: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
}

.markets-table__arrow {
  color: var(--color-text-subtle);
  font-size: var(--text-lg);
}

.holdings-table {
  overflow: hidden;
  border: var(--border-default);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-xs);
}

.holdings-table__head {
  padding-block: var(--space-3);
  padding-inline: var(--space-4);
  border-block-end: var(--border-subtle);
  background: var(--color-surface-elevated);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
}

.holding-card {
  border-block-end: var(--border-subtle);
  transition: var(--transition-colors);
}

.holding-card:last-child {
  border-block-end: 0;
}

@media (hover: hover) {
  .holding-card:hover {
    background: var(--color-surface-hover);
  }
}

.holding-cell small {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

/* Search, sort and form controls ----------------------------------------- */

.input-shell {
  display: flex;
  min-block-size: var(--size-control-lg);
  align-items: center;
  gap: var(--space-3);
  padding-inline: var(--space-4);
  border: var(--border-width) solid var(--color-control-border);
  border-radius: var(--radius-control);
  background: var(--color-control-bg);
  color: var(--color-text-muted);
  box-shadow: var(--edge-specular-sunken);
  transition: var(--transition-colors);
}

@media (hover: hover) {
  .input-shell:hover {
    border-color: var(--color-control-border-hover);
    background: var(--color-control-bg-hover);
  }
}

.input-shell:focus-within {
  border-color: var(--color-control-border-focus);
  box-shadow: var(--shadow-focus);
}

.input-shell:has(:disabled) {
  border-color: var(--color-border-subtle);
  background: var(--color-control-bg-disabled);
  color: var(--color-text-disabled);
}

.input-shell__icon {
  display: inline-grid;
  inline-size: var(--size-icon-lg);
  block-size: var(--size-icon-lg);
  flex: none;
  place-items: center;
  color: var(--color-text-muted);
}

.input-shell :where(input, textarea) {
  min-inline-size: var(--space-0);
  flex: 1;
  padding: var(--space-0);
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--color-control-text);
  font: inherit;
  line-height: var(--leading-normal);
  caret-color: var(--color-control-caret);
  box-shadow: none;
}

.input-shell :where(input, textarea)::placeholder,
.trade-amount-input::placeholder {
  color: var(--color-control-placeholder);
  opacity: 1;
}

.markets-filter-group {
  display: grid;
  gap: var(--space-2);
}

.markets-filter-group__label,
.markets-sort > span,
.form-label {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.markets-filter-group__options,
.filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.markets-sort {
  display: grid;
  gap: var(--space-2);
}

.markets-sort select,
.select-control,
.form-control {
  min-block-size: var(--size-control-sm);
  padding-block: var(--space-2);
  padding-inline: var(--space-4);
  border: var(--border-width) solid var(--color-control-border);
  border-radius: var(--radius-control);
  background: var(--color-control-bg);
  color: var(--color-control-text);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  cursor: pointer;
  box-shadow: var(--shadow-inset);
  transition: var(--transition-colors);
}

@media (hover: hover) {
  :where(.markets-sort select, .select-control, .form-control):not(:disabled):hover {
    border-color: var(--color-control-border-hover);
    background: var(--color-control-bg-hover);
  }
}

:where(.markets-sort select, .select-control, .form-control):focus-visible {
  outline: none;
  border-color: var(--color-control-border-focus);
  box-shadow: var(--shadow-focus);
}

:where(.markets-sort select, .select-control, .form-control):disabled {
  border-color: var(--color-border-subtle);
  background: var(--color-control-bg-disabled);
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

.field-message,
.form-hint {
  min-block-size: var(--space-5);
  margin: var(--space-0);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
}

.field-message.is-error,
.form-error {
  color: var(--color-error);
}

:where(.input-shell, .amount-field):has([aria-invalid="true"]) {
  border-color: var(--color-error-border);
  box-shadow: var(--shadow-focus-error);
}

/* Tooltips --------------------------------------------------------------- */

.info-tip,
.tooltip {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}

.info-tip__trigger {
  display: inline-grid;
  inline-size: var(--size-icon-xl);
  block-size: var(--size-icon-xl);
  place-items: center;
  padding: var(--space-0);
  border: var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--color-surface-elevated);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  cursor: help;
  transition: var(--transition-colors);
}

@media (hover: hover) {
  .info-tip__trigger:hover {
    border-color: var(--color-border-strong);
    color: var(--color-text);
  }
}

.info-tip__content,
.tooltip__content {
  position: absolute;
  inset-block-end: calc(100% + var(--space-2));
  inset-inline-start: 50%;
  z-index: var(--z-dropdown);
  inline-size: max-content;
  max-inline-size: min(calc(100vw - var(--space-8)), var(--layout-readable-max));
  padding-block: var(--space-2);
  padding-inline: var(--space-3);
  border: var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface-high);
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  text-align: start;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, var(--space-1));
  transition: var(--transition-opacity), var(--transition-transform), visibility var(--duration-fast) var(--ease-out);
}

.info-tip:is(:hover, :focus-within) .info-tip__content,
.tooltip:is(:hover, :focus-within) .tooltip__content {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, var(--space-0));
}

/* (sparkline styles removed with the fabricated price-trend series) */

/* Toasts, status and progress -------------------------------------------- */

.toast-region {
  position: fixed;
  inset-block-start: var(--space-4);
  inset-inline-end: var(--space-4);
  z-index: var(--z-toast);
  display: grid;
  max-inline-size: calc(100vw - var(--space-8));
  gap: var(--space-3);
  pointer-events: none;
}

.toast {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-3);
  inline-size: max-content;
  max-inline-size: 100%;
  padding: var(--space-4);
  border: var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface-high);
  color: var(--color-text);
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
  animation: component-toast-enter var(--duration-base) var(--ease-out) both;
}

.toast__icon {
  display: inline-grid;
  inline-size: var(--size-icon-lg);
  block-size: var(--size-icon-lg);
  place-items: center;
  color: var(--color-info);
}

.toast__content {
  display: grid;
  gap: var(--space-1);
}

.toast__title,
.toast strong {
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.toast__message,
.toast__content > span,
.toast p {
  margin: var(--space-0);
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
}

.toast__close,
.toast__dismiss {
  display: inline-grid;
  inline-size: var(--size-touch-min);
  block-size: var(--size-touch-min);
  place-items: center;
  margin: calc(var(--space-2) * -1);
  padding: var(--space-0);
  border: var(--border-width) solid transparent;
  background: transparent;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  cursor: pointer;
}

@media (hover: hover) {
  :where(.toast__close, .toast__dismiss):hover {
    border-color: var(--color-border);
    background: var(--color-surface-hover);
    color: var(--color-text);
  }
}

.toast__close:focus-visible,
.toast__dismiss:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.toast--success {
  border-color: var(--color-success-border);
}

.toast--success .toast__icon {
  color: var(--color-success);
}

.toast--error {
  border-color: var(--color-error-border);
}

.toast--error .toast__icon {
  color: var(--color-error);
}

.toast--warning {
  border-color: var(--color-warning-border);
}

.toast--warning .toast__icon {
  color: var(--color-warning);
}

:where(.progress, .progress-track, .allocation-bar) {
  position: relative;
  block-size: var(--space-2);
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--color-surface-active);
  box-shadow: inset 0 0 0 var(--border-width) var(--color-border-subtle);
}

:where(.progress__bar, .progress-bar, .allocation-bar__fill) {
  display: block;
  block-size: 100%;
  border-radius: inherit;
  background: var(--gradient-accent);
  box-shadow: var(--shadow-accent);
  transition: inline-size var(--duration-slow) var(--ease-out), width var(--duration-slow) var(--ease-out);
}

.progress__bar,
.progress-bar {
  inline-size: var(--progress-value, 0%);
}

.status-line {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

/* Wallet and network identity ------------------------------------------- */

.wallet-button {
  max-inline-size: 100%;
}

.wallet-button[data-state="wrong-chain"],
.wallet-button[data-state="error"] {
  --control-border: var(--color-error-border);
  --control-border-hover: var(--color-error);
  --control-foreground: var(--color-error);
  --control-background: var(--color-error-soft);
  --control-background-hover: var(--color-error-soft);
}

.wallet-button[data-state="connected"],
.wallet-button[data-state="demo"] {
  --control-border: var(--color-success-border);
  --control-border-hover: var(--color-success);
  --control-background: var(--color-success-soft);
  --control-background-hover: var(--color-success-soft);
}

.wallet-pill {
  display: flex;
  min-block-size: var(--size-control-md);
  max-inline-size: 100%;
  inline-size: fit-content;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-1);
  padding-inline: var(--space-2) var(--space-3);
  border: var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--gradient-surface);
  box-shadow: var(--shadow-inset);
}

.wallet-pill:is([data-state="wrong-chain"], [data-state="error"]) {
  border-color: var(--color-error-border);
  background: var(--color-error-soft);
}

.wallet-pill:is([data-state="wrong-chain"], [data-state="error"]) .wallet-avatar {
  border-color: var(--color-error-border);
  background: var(--color-error-soft);
  color: var(--color-error);
}

.wallet-avatar {
  display: inline-grid;
  inline-size: var(--size-control-sm);
  block-size: var(--size-control-sm);
  flex: none;
  place-items: center;
  border: var(--border-accent);
  border-radius: var(--radius-pill);
  background: var(--color-accent-soft);
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.wallet-details {
  display: grid;
  min-inline-size: var(--space-0);
  gap: var(--space-1);
  text-align: start;
}

.wallet-label {
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-none);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wallet-address {
  overflow: hidden;
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  line-height: var(--leading-none);
  text-overflow: ellipsis;
  white-space: nowrap;
}


.network-pill {
  border-color: var(--color-success-border);
  background: var(--color-success-soft);
  color: var(--color-success);
}

.network-pill[data-state="warning"] {
  border-color: var(--color-warning-border);
  background: var(--color-warning-soft);
  color: var(--color-warning);
}


/* Empty and loading states ----------------------------------------------- */

.empty-state {
  display: grid;
  justify-items: start;
  gap: var(--space-3);
  padding: var(--space-8);
  border: var(--border-width) dashed var(--color-border-strong);
  border-radius: var(--radius-card);
  background: var(--color-accent-softer);
  text-align: start;
}

:where(.empty-state__visual, .empty-state__mark) {
  display: inline-grid;
  inline-size: var(--size-control-lg);
  block-size: var(--size-control-lg);
  place-items: center;
  margin-block-end: var(--space-2);
  border: var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--gradient-metal);
  color: var(--color-accent);
  box-shadow: var(--shadow-xs);
}

:where(.empty-state__title, .empty-state > h1, .empty-state > h2, .empty-state > h3) {
  margin: var(--space-0);
  color: var(--color-text);
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
}

:where(.empty-state__body, .empty-state > p) {
  max-inline-size: var(--layout-readable-max);
  margin: var(--space-0);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.empty-state__action,
.empty-state > .button {
  margin-block-start: var(--space-2);
}

.skeleton {
  border-radius: var(--radius-card);
}

.skeleton__content {
  display: grid;
  gap: var(--space-3);
}

.skeleton__line {
  display: block;
  block-size: var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-surface-hover);
}

.skeleton__line--1 {
  inline-size: 100%;
}

.skeleton__line--2 {
  inline-size: calc(100% - var(--space-12));
}

.skeleton__line--3 {
  inline-size: calc(100% - var(--space-6));
}

.skeleton__line--4 {
  inline-size: calc(100% - var(--space-16));
}

.skeleton--card {
  padding: var(--space-5);
  border: var(--border-default);
  background: var(--color-surface);
}

/* Order form and review -------------------------------------------------- */

.trade-panel {
  overflow: hidden;
  border: var(--border-strong);
  border-radius: var(--radius-panel);
  background: var(--gradient-surface);
  box-shadow: var(--shadow-md);
}

.trade-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5);
  border-block-end: var(--border-subtle);
}

.trade-header > div {
  display: grid;
  gap: var(--space-2);
}

.trade-header h2 {
  margin: var(--space-0);
  color: var(--color-text);
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
}

.trade-header > span:last-child:not([data-status]) {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  white-space: nowrap;
}

.trade-side-tabs {
  display: flex;
  margin: var(--space-4) var(--space-5) var(--space-0);
}

.trade-side-tab {
  flex: 1;
}

.trade-form {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
}

.trade-balance {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.trade-balance label {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.amount-field {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-block-size: var(--size-control-lg);
  align-items: center;
  gap: var(--space-2);
  padding-inline: var(--space-4);
  border: var(--border-width) solid var(--color-control-border);
  border-radius: var(--radius-control);
  background: var(--color-control-bg);
  box-shadow: var(--shadow-inset);
  transition: var(--transition-colors);
}

@media (hover: hover) {
  .amount-field:hover {
    border-color: var(--color-control-border-hover);
    background: var(--color-control-bg-hover);
  }
}

.amount-field:focus-within {
  border-color: var(--color-control-border-focus);
  box-shadow: var(--shadow-focus);
}

.amount-prefix {
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xl);
}

.trade-amount-input {
  min-inline-size: var(--space-0);
  padding: var(--space-0);
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  caret-color: var(--color-control-caret);
  box-shadow: none;
}

.amount-currency {
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.quick-amounts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
}

.quick-amount {
  min-block-size: var(--size-touch-min);
  padding-inline: var(--space-2);
  border: var(--border-default);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  cursor: pointer;
  transition: var(--transition-colors);
}

@media (hover: hover) {
  .quick-amount:not(:disabled):hover {
    border-color: var(--color-border-accent);
    background: var(--color-accent-soft);
    color: var(--color-accent);
  }
}

.trade-disclosure,
.trade-quote-empty {
  margin: var(--space-0);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-relaxed);
}

.trade-quote {
  padding-block-start: var(--space-2);
  border-block-start: var(--border-subtle);
}

.trade-quote dl,
.review-summary {
  display: grid;
  gap: var(--space-0);
  margin: var(--space-0);
}

.quote-row,
.review-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-block-end: var(--border-subtle);
}

.quote-row :where(dt, dd),
.review-row :where(dt, dd) {
  margin: var(--space-0);
}

.quote-row dt,
.review-row dt {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.quote-value,
.review-row dd {
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  text-align: end;
}

.review-row dd span {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.review-row:last-child {
  border-block-end: 0;
}

/* Formless panel states: unavailable protocol actions, and the inline
   pre-signing review. Both render without a form, so they carry the padding
   `.trade-form` normally supplies; without it a trailing disclosure sits flush
   against the panel's rounded bottom border and is clipped by it. */
.trade-preview {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
}

.trade-microlabel {
  margin: var(--space-0);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  line-height: var(--leading-normal);
  text-transform: uppercase;
}

.outcome-card {
  display: grid;
  gap: var(--space-2);
  margin-block-start: var(--space-4);
  padding: var(--space-4);
  border: var(--border-accent);
  border-radius: var(--radius-md);
  background: var(--color-accent-soft);
}

.outcome-eyebrow {
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.outcome-value {
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-variant-numeric: tabular-nums;
  line-height: var(--leading-tight);
}

.outcome-copy {
  margin: var(--space-0);
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
  line-height: var(--leading-relaxed);
}

.trade-review-button {
  inline-size: 100%;
  min-block-size: var(--size-control-lg);
  margin-block-start: var(--space-1);
}


.modal-header > div {
  display: grid;
  gap: var(--space-2);
}

.modal-header h2 {
  margin: var(--space-0);
  color: var(--color-text);
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
}


.trade-confirm-button,
.trade-cancel-button {
  min-inline-size: calc(var(--size-control-lg) * 2);
}

.trade-status {
  display: grid;
  gap: var(--space-2);
  min-block-size: var(--space-5);
  margin-block-start: var(--space-4);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.trade-status:empty {
  display: none;
}

.trade-success,
.trade-error {
  padding: var(--space-4);
  border-radius: var(--radius-md);
}

.trade-success {
  border: var(--border-success);
  background: var(--color-success-soft);
  color: var(--color-success);
}

.trade-error {
  border: var(--border-error);
  background: var(--color-error-soft);
  color: var(--color-error);
}

.trade-success span,
.trade-error span {
  color: var(--color-text-secondary);
}

/* Banners and trust notices ---------------------------------------------- */

:where(.banner, .eligibility-note, .review-notice) {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border: var(--border-default);
  border-radius: var(--radius-md);
  background: var(--color-surface-elevated);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

:where(.banner, .eligibility-note, .review-notice) :where(strong, .banner__title) {
  color: var(--color-text);
  font-weight: var(--weight-semibold);
}

.banner--info {
  border-color: var(--color-info-border);
  background: var(--color-info-soft);
}

.banner--success {
  border-color: var(--color-success-border);
  background: var(--color-success-soft);
}

:where(.banner--warning, .eligibility-note, .review-notice) {
  border-color: var(--color-warning-border);
  background: var(--color-warning-soft);
}

.banner--error {
  border-color: var(--color-error-border);
  background: var(--color-error-soft);
}

.review-notice {
  margin: var(--space-0);
  font-size: var(--text-xs);
}

.review-risk {
  margin: var(--space-0);
  padding: var(--space-4);
  border: var(--border-error);
  border-radius: var(--radius-md);
  background: var(--color-error-soft);
  color: var(--color-text);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.eligibility-note__icon {
  display: inline-grid;
  inline-size: var(--size-touch-min);
  block-size: var(--size-touch-min);
  flex: none;
  place-items: center;
  border: var(--border-warning);
  border-radius: var(--radius-pill);
  background: var(--color-surface-elevated);
  color: var(--color-warning);
}

.eligibility-note__content,
.trust-strip__item > div {
  display: grid;
  gap: var(--space-1);
}

.eligibility-note__content h2 {
  margin: var(--space-0);
  color: var(--color-text);
  font-size: var(--text-md);
  line-height: var(--leading-snug);
}

.eligibility-note__content :where(p, small) {
  margin: var(--space-0);
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
  line-height: var(--leading-relaxed);
}

.eligibility-note__content small {
  color: var(--color-text-muted);
}

.trust-strip__item > div > strong {
  color: var(--color-text);
  font-size: var(--text-sm);
}

.trust-strip__item > div > span {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
}

.trust-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-6);
  padding-block: var(--space-4);
  border-block: var(--border-subtle);
}

.trust-strip__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.trust-strip__item :where(svg, .icon) {
  color: var(--color-text-muted);
}

.hash-button {
  min-block-size: var(--size-touch-min);
  padding-inline: var(--space-2);
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.hash-button__label {
  overflow: hidden;
  max-inline-size: var(--layout-readable-max);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Component motion ------------------------------------------------------- */

@keyframes component-spin {
  to {
    transform: rotate(1turn);
  }
}

@keyframes component-toast-enter {
  from {
    opacity: 0;
    transform: translateY(calc(var(--space-2) * -1));
  }
  to {
    opacity: 1;
    transform: translateY(var(--space-0));
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(
    .button,
    .button-primary,
    .button-secondary,
    .icon-button,
    .mobile-menu-toggle,
    .wallet-button,
    .trade-review-button,
    .trade-confirm-button,
    .trade-cancel-button,
    .modal-close,
    .hash-button,
    .markets-filter-chip,
    .trade-side-tab,
    .strategy-option,
    .quick-amount,
    .period-button,
    .filter-tab,
    .tab,
    .segmented-control__button,
    .market-card,
    .spotlight-card,
    .related-card,
    .toast,
    .info-tip__content,
    .tooltip__content,
    .progress__bar,
    .progress-bar,
    .allocation-bar__fill
  ) {
    scroll-behavior: auto;
    transition-duration: var(--duration-instant);
  }

  :where(
    .button,
    .wallet-button,
    .trade-review-button,
    .trade-confirm-button
  ):where(.is-loading, [aria-busy="true"])::after,
  .wallet-button[data-state="connecting"]::after,
  .trade-confirm-button:disabled::after,
  .toast {
    animation: none;
  }
}
/* Lighter Pro Trading Chart Terminal -------------------------------------- */

/* The chart is the centrepiece: geometry here is deliberately unchanged. What
   changes is that it joins the system — the hardcoded cyan #00f2fe that used
   to be this site's real accent is now --color-live, and the blue-black
   #080a10 that fought the jet-black palette is a neutral ramp step. */
.lighter-chart-terminal {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface-panel);
  border: var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  margin-block-end: var(--space-6);
}

/* Top and bottom chrome rails read as sunken relative to the panel. */
.terminal-topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg-raised);
  border-block-end: var(--border-subtle);
}

.terminal-asset-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.terminal-badge-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

/* Marks LIVE DATA, so it earns accent ink — one of the three sanctioned uses. */
.hud-pill-active {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-0-5) var(--space-2);
  border-radius: var(--radius-xs);
  background: var(--color-accent-soft);
  border: var(--border-width) solid var(--color-border-accent);
  color: var(--color-live);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
}

.hud-dot {
  inline-size: var(--space-1-5);
  block-size: var(--space-1-5);
  border-radius: var(--radius-pill);
  background: var(--color-live);
  animation: pulse-hud var(--duration-pulse) infinite var(--ease-in-out);
}

.hud-mono-tag {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--color-text-subtle);
  letter-spacing: var(--tracking-wide);
}

.terminal-title-row {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
}

.terminal-market-name {
  margin: var(--space-0);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-text);
}

.terminal-ticker-pill {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  padding: var(--space-0-5) var(--space-1-5);
  border-radius: var(--radius-xs);
  background: var(--color-surface-elevated);
  color: var(--color-text-secondary);
}

.terminal-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.chart-type-tabs,
.terminal-periods {
  display: inline-flex;
  align-items: center;
  background: var(--color-bg-raised);
  border: var(--border-subtle);
  border-radius: var(--radius-hud);
  padding: var(--space-0-5);
  gap: var(--space-0-5);
}

.chart-type-btn,
.terminal-period-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2-5);
  border-radius: var(--radius-xs);
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: var(--transition-colors);
}

@media (hover: hover) {
  :where(.chart-type-btn, .terminal-period-btn):hover {
    color: var(--color-text);
    background: var(--color-surface-hover);
  }
}

/* Selected steps one rung above hover on the ramp (active #303030 vs hover
   #232323) so selection stays legible without any elevation. */
.chart-type-btn.is-active,
.terminal-period-btn.is-active {
  color: var(--color-text);
  background: var(--color-surface-active);
}

.terminal-ohlc-hud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  padding: var(--space-2) var(--space-5);
  background: var(--color-bg);
  border-block-end: var(--border-subtle);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

.ohlc-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
}

.ohlc-lbl {
  color: var(--color-text-subtle);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.ohlc-time {
  margin-inline-start: auto;
  color: var(--color-text-muted);
}

.terminal-embed-wrap {
  position: relative;
  inline-size: 100%;
  block-size: clamp(30rem, 68vh, 52rem);
  background: var(--color-bg-raised);
  overflow: hidden;
}

.terminal-embed-wrap iframe {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  border: 0;
  border-radius: 0 0 calc(var(--radius-lg) - var(--border-width)) calc(var(--radius-lg) - var(--border-width));
}

/* The live price on the axis: live data, so accent FILL is correct here. */
.live-price-axis-pill {
  position: absolute;
  inset-inline-end: var(--space-1-5);
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-0-5) var(--space-1-5);
  border-radius: var(--radius-xs);
  background: var(--color-live);
  color: var(--color-on-accent);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  box-shadow: var(--edge-specular-inverse);
  pointer-events: none;
  z-index: var(--z-sticky);
  transition: top var(--duration-base) var(--ease-out);
}

.live-pulse-radar {
  inline-size: var(--space-1-5);
  block-size: var(--space-1-5);
  border-radius: var(--radius-pill);
  background: var(--color-on-accent);
}

.terminal-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-5);
  background: var(--color-bg-raised);
  border-block-start: var(--border-subtle);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
}

.terminal-footer-left {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.feed-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  color: var(--color-live);
}

.feed-status-dot {
  inline-size: var(--space-1-5);
  block-size: var(--space-1-5);
  border-radius: var(--radius-pill);
  background: var(--color-live);
}

/* Reduced motion, LAST IN THE FILE ON PURPOSE ---------------------------- */

/* Two things here are deliberate and both were verified by measurement rather
   than by reasoning.

   1. IT SITS LAST IN THE FILE. The reduced-motion block higher up precedes the
      terminal rules, so an `animation: none` written there loses the
      source-order tie to `.hud-dot`'s later declaration and silently keeps
      animating.
   2. IT DOES NOT USE :where(). My first version wrapped these in :where(),
      which has ZERO specificity, so `.hud-dot` (0,1,0) beat
      `:where(.hud-dot)` (0,0,0) no matter where it sat in the file — the dot
      kept pulsing under prefers-reduced-motion and the emulated-media probe
      caught it. Plain selectors here on purpose.

   The block higher up also only SHORTENED durations, which does not honour the
   preference: a translate that still happens is still motion. Here it is
   removed outright. */
@media (prefers-reduced-motion: reduce) {
  .hud-dot,
  .live-pulse-radar,
  .feed-status-dot {
    animation: none;
  }

  .live-price-axis-pill {
    transition: none;
  }

  .button:hover,
  .button-primary:hover,
  .button-secondary:hover,
  .icon-button:hover,
  .mobile-menu-toggle:hover,
  .wallet-button:hover,
  .trade-review-button:hover,
  .trade-confirm-button:hover,
  .trade-cancel-button:hover,
  .modal-close:hover,
  .hash-button:hover,
  a.card:hover,
  button.card:hover,
  .card--interactive:hover,
  .market-card:hover,
  .spotlight-card:hover,
  .related-card:hover {
    transform: none;
  }
}