/* Wykres z osiami (mrf_chart): strona główna, gold/silver ratio. */
.gchart { flex: 1; display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto auto; column-gap: 10px; min-height: 240px; }
.gchart .ya { position: relative; grid-row: 1; min-width: 46px; }
.gchart .ya span { position: absolute; right: 0; transform: translateY(-50%); font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gchart .plot { position: relative; grid-row: 1; grid-column: 2; min-height: 180px; }
.gchart .plot svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.gchart .gl { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.gchart .xa { position: relative; grid-column: 2; height: 22px; border-top: 1px solid var(--line); }
.gchart .xa span { position: absolute; top: 6px; transform: translateX(-50%); font-size: 11px; color: var(--muted); white-space: nowrap; }
.gchart .xa span:first-child { transform: none; }
.gchart .xa span:last-child { transform: translateX(-100%); }
.gchart .hilo { grid-column: 1 / -1; margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.gchart .hilo b { color: var(--ink); font-weight: 700; }
.gchart .hl { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--ink); opacity: .35; pointer-events: none; }
.gchart .tip { position: absolute; top: 4px; transform: translateX(-50%); background: var(--ink); color: #fff; font-size: 12px; line-height: 1.35; padding: 5px 8px; border-radius: 6px; white-space: nowrap; pointer-events: none; }
.gchart .tip small { display: block; opacity: .75; font-size: 11px; }
.gchart .spk-l { fill: none; stroke: var(--up); stroke-width: 2.2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.gchart .spk-a { fill: var(--up-soft); opacity: .8; }