/* Readability corrections for the local TensorCash official-light preview.
 * Keep the published theme and its page geometry intact; resolve semantic
 * text roles and the legacy 6–10 px analytics captions here. */

:root:not([data-theme="dark"]) body[data-page="analytics"] :is(
  .analytics-signal-strip span, .analytics-signal-strip small,
  .analytics-signal-strip span b, .analytics-section-title > span,
  .analytics-section-title p, .analytics-card-head > div > span,
  .analytics-card-head p, .analytics-alert-copy b, .analytics-alert-copy small,
  .analytics-alert-threshold span, .analytics-alert-threshold select,
  .analytics-range-tabs button, .analytics-toggle button,
  .analytics-market-summary span, .analytics-market-summary small,
  .analytics-subchart-head span, .analytics-subchart-head small,
  .analytics-chart-tooltip span, .analytics-chart-tooltip small,
  .analytics-whale-tooltip-list a span, .analytics-whale-tooltip-list a small,
  .analytics-studio-foot, .analytics-chart-legend b, .analytics-chart-legend small,
  .analytics-card-stat span, .analytics-card-foot, .analytics-card-foot small,
  .mining-history-meta small, .mining-history-meta span,
  .mining-history-toolbar > span, .mining-history-toolbar > b,
  .mining-history-tooltip span, .mining-history-tooltip small,
  .mining-history-tooltip-rates em, .mining-history-legend-title,
  .mining-history-key b, .mining-history-key small,
  .mining-history-inspector > div:first-child span,
  .mining-history-inspector > div:first-child small,
  .mining-history-addresses p, .mining-history-addresses a,
  .mining-history-method, .large-transfer-rank, .large-transfer-id strong,
  .large-transfer-id small, .large-transfer-value, .analytics-empty-copy,
  .supply-orbit span, .supply-values span, .reward-step span,
  .supply-countdown small, .analytics-supply-card .epoch-progress,
  .analytics-methodology, .analytics-methodology strong,
  .analytics-notification-feedback
) {
  font-size: var(--tc-size-label-min);
}

/* This official charcoal hero retains inverse roles in the light scheme. */
:root:not([data-theme="dark"]) body[data-page="analytics"] :is(
  .analytics-live-line, .analytics-live-line b,
  .analytics-price-lockup span, .analytics-price-lockup em,
  .analytics-hero-metrics span, .analytics-hero-metrics small
) {
  font-size: var(--tc-size-label-min);
}
:root:not([data-theme="dark"]) body[data-page="analytics"] :is(
  .analytics-live-line, .analytics-live-line b,
  .analytics-price-lockup span, .analytics-hero-metrics span,
  .analytics-hero-metrics small, .analytics-dark-empty
) {
  color: var(--tc-inverse-muted);
}
:root:not([data-theme="dark"]) body[data-page="analytics"] :is(
  .analytics-price-lockup strong, .analytics-hero-metrics strong
) {
  color: var(--tc-inverse-text);
}

/* Price changes are a secondary reading, not a light button on charcoal. */
:root[data-theme="light"] body[data-page="analytics"] .analytics-price-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px 20px;
}
:root[data-theme="light"] body[data-page="analytics"] .analytics-price-lockup .analytics-price-change {
  --price-change-ink: var(--tc-inverse-muted);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--price-change-ink);
  background: transparent;
  font-family: var(--tc-font-sans);
  font-size: 18px;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: normal;
  white-space: nowrap;
}
:root[data-theme="light"] body[data-page="analytics"] .analytics-price-change[data-direction="up"] {
  --price-change-ink: #9DB898;
}
:root[data-theme="light"] body[data-page="analytics"] .analytics-price-change[data-direction="down"] {
  --price-change-ink: #D99A8B;
}
:root[data-theme="light"] body[data-page="analytics"] .analytics-change-value {
  color: var(--price-change-ink);
  font-size: inherit;
  font-weight: var(--tc-weight-semibold);
  font-variant-numeric: tabular-nums;
}
:root[data-theme="light"] body[data-page="analytics"] .analytics-change-arrow {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  color: var(--price-change-ink);
}
:root[data-theme="light"] body[data-page="analytics"] .analytics-price-change[data-direction="down"] .analytics-change-arrow {
  transform: rotate(90deg);
}
:root[data-theme="light"] body[data-page="analytics"] .analytics-price-change[data-direction="unavailable"] .analytics-change-arrow {
  display: none;
}
:root[data-theme="light"] body[data-page="analytics"] .analytics-change-period {
  margin-left: 3px;
  padding-left: 10px;
  border-left: 1px solid var(--tc-inverse-rule);
  color: var(--tc-inverse-muted);
  font-size: 13px;
  font-weight: var(--tc-weight-medium);
  line-height: 1.1;
  letter-spacing: normal;
}

:root:not([data-theme="dark"]) body[data-page="analytics"] .analytics-empty-copy {
  color: var(--tc-text-muted);
}
:root:not([data-theme="dark"]) body[data-page="analytics"] .mining-history-addresses a small {
  color: var(--tc-text-muted);
}

/* A hidden curve is still an actionable legend entry. Its text must stay
 * legible; the crossed-out label and subdued swatch communicate its state. */
:root:not([data-theme="dark"]) body[data-page="analytics"] .mining-history-key.is-muted {
  opacity: 1;
}
:root:not([data-theme="dark"]) body[data-page="analytics"] .mining-history-key.is-muted :is(b, strong) {
  color: var(--tc-text-muted);
}
:root:not([data-theme="dark"]) body[data-page="analytics"] .mining-history-key.is-muted i {
  opacity: .38;
}
:root:not([data-theme="dark"]) body[data-page="analytics"] .mining-history-key:hover :is(b, strong) {
  color: var(--tc-text-strong);
}

/* Legacy control columns reserve 112 px for the label even when the parent
 * shrinks on a phone, pushing its switch over the neighbouring threshold. */
@media (max-width: 600px) {
  :root[data-theme="light"] body[data-page="analytics"] .analytics-price-row {
    gap: 10px 14px;
  }
  :root[data-theme="light"] body[data-page="analytics"] .analytics-price-lockup .analytics-price-change {
    gap: 6px;
    font-size: 16px;
  }
  :root[data-theme="light"] body[data-page="analytics"] .analytics-change-period {
    font-size: 12px;
  }
  :root:not([data-theme="dark"]) body[data-page="analytics"] .analytics-alert-control button {
    grid-template-columns: 24px minmax(0, 1fr) 29px;
    gap: 8px;
    padding-inline: 8px;
  }
  :root:not([data-theme="dark"]) body[data-page="analytics"] .analytics-alert-icon {
    width: 24px;
    height: 24px;
  }
  :root:not([data-theme="dark"]) body[data-page="analytics"] .analytics-alert-threshold {
    min-width: 110px;
    padding-inline: 10px;
  }
}