/* Gold/Silver ratio chart — complements the main price chart. */
.ratio-chart { background: var(--gray-0); padding-block: var(--home-sec-pad-y); }
.ratio-chart__card { background: var(--gray-0); border: 1px solid var(--color-border); border-radius: var(--radius-20); padding: clamp(20px, 3vw, 40px); }
.ratio-chart__head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.ratio-chart__title { margin: 0; font-weight: var(--fw-medium); font-size: var(--fs-28); line-height: var(--lh-36); color: var(--gray-8); }
.ratio-chart__intro { margin: 0; font-size: var(--fs-16); line-height: var(--lh-25); color: var(--gray-7); max-width: 70ch; }
.ratio-chart__stats { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; margin-bottom: 16px; }
.ratio-chart__stat { display: inline-flex; align-items: baseline; gap: 6px; }
.ratio-chart__stat-label { font-size: var(--fs-14); color: var(--gray-7); }
.ratio-chart__stat-val { font-weight: var(--fw-semibold); font-size: var(--fs-18); color: var(--gray-8); font-variant-numeric: tabular-nums; }
.ratio-chart__stat-val--up { color: var(--green); }
.ratio-chart__stat-val--down { color: var(--red); }
.ratio-chart__spans { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ratio-chart__span { appearance: none; border: 1px solid var(--color-border); background: var(--gray-0); color: var(--gray-7); border-radius: var(--radius-8); padding: 6px 12px; font: inherit; font-size: var(--fs-14); cursor: pointer; }
.ratio-chart__span--active { background: var(--og-blue); border-color: var(--og-blue); color: var(--gray-0); }
.ratio-chart__plot { position: relative; }
.ratio-chart__graphic { position: relative; width: 100%; height: clamp(260px, 32vw, 360px); }
@media (max-width: 767.98px) {
  .ratio-chart__title { font-size: var(--fs-26); }
  .ratio-chart__stats { gap: 6px 16px; }
}