/* Hedge local trade mobile/readability fixes. Scoped to trading hedge tab only. */

:root {
  --layout-hedge-section-gap: var(--space-3, 12px);
  --layout-hedge-section-pad-y: var(--space-3, 12px);
  --layout-hedge-section-pad-x: var(--space-4, 16px);
  --layout-hedge-section-count-min: var(--layout-stat-min-width, 168px);
  --layout-hedge-mobile-section-pad-y: var(--space-3, 12px);
  --layout-hedge-mobile-section-pad-x: var(--space-3, 12px);
  --layout-hedge-title-color: var(--text-primary, var(--cockpit-text, #0f172a));
  --layout-hedge-copy-color: var(--text-secondary, var(--cockpit-muted, #475569));
  --layout-hedge-label-color: var(--text-secondary, var(--cockpit-muted-strong, #475569));
  --layout-hedge-label-strong-color: var(--text-primary, var(--cockpit-text, #0f172a));
  --layout-hedge-card-bg: var(--surface-card, var(--cockpit-cell-bg-strong, #ffffff));
  --layout-hedge-card-border: var(--border-subtle, var(--cockpit-line, #e5e7eb));
}

#tabHedge .hedge-source-block {
  margin-top: var(--space-4, 16px);
}

#tabHedge .hedge-section-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(var(--layout-hedge-section-count-min, 168px), auto);
  align-items: stretch;
  gap: var(--layout-hedge-section-gap, 12px);
  margin: 0 0 var(--space-3, 12px);
}

#tabHedge .hedge-section-intro > div:first-child {
  min-width: 0;
  padding: var(--layout-hedge-section-pad-y, 12px) var(--layout-hedge-section-pad-x, 16px);
}

#tabHedge .hedge-section-intro .eyebrow,
#tabHedge .hedge-section-count span {
  color: var(--layout-hedge-label-color, #475569);
  opacity: 1;
}

#tabHedge .hedge-section-intro h3 {
  margin: var(--space-1, 4px) 0 0;
  color: var(--layout-hedge-title-color, #0f172a);
}

#tabHedge .hedge-section-intro p {
  margin: var(--space-2, 8px) 0 0;
  color: var(--layout-hedge-copy-color, #475569);
  line-height: var(--line-height-relaxed, 1.55);
}

#tabHedge .hedge-section-count {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-1, 4px);
  min-width: 0;
  padding: var(--layout-hedge-section-pad-y, 12px) var(--layout-hedge-section-pad-x, 16px);
  border: 1px solid var(--layout-hedge-card-border, #e5e7eb);
  border-radius: var(--radius-lg, 18px);
  background: var(--layout-hedge-card-bg, #ffffff);
  color: var(--layout-hedge-label-strong-color, #0f172a);
}

#tabHedge .hedge-section-count strong {
  color: var(--layout-hedge-label-strong-color, #0f172a);
}

#tabHedge .hedge-origin-pill,
#tabHedge .hedge-state-disclosure-summary,
#tabHedge .hedge-state-disclosure-hint,
#tabHedge .hedge-card-age span,
#tabHedge .hedge-meta-grid span {
  color: var(--layout-hedge-label-color, #475569);
  opacity: 1;
}

#tabHedge .hedge-origin-pill.exchange,
#tabHedge .hedge-origin-pill.manual,
#tabHedge .hedge-origin-pill.muted,
#tabHedge .hedge-state-pill.neutral,
#tabHedge .hedge-state-pill.accent {
  color: var(--layout-hedge-label-strong-color, #0f172a);
}

@media (max-width: 720px) {
  #tabHedge .hedge-section-intro {
    grid-template-columns: 1fr;
    gap: var(--space-2, 8px);
    margin-inline: var(--space-1, 4px);
  }

  #tabHedge .hedge-section-intro > div:first-child,
  #tabHedge .hedge-section-count {
    padding: var(--layout-hedge-mobile-section-pad-y, 12px) var(--layout-hedge-mobile-section-pad-x, 12px);
  }
}