/* a player's osu! rank through days, weeks and months (rank-graph.js): the rank now, how far it moved in the period, the periods (the page's
   own segmented buttons); a thin line, the better rank higher, its last reading a dot, the moment under the mouse with its numbers.
   The same file in the app (ui/) and on the website (public/) */
.rg { display: flex; flex-direction: column; gap: 10px; }
.rg-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; }
.rg-now { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-variant-numeric: tabular-nums; }
.rg-now b { font-family: var(--font-head); font-size: 26px; line-height: 1.1; }
.rg-now small { color: var(--muted); font-size: 13px; font-weight: 600; }
.rg-ch { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; } .rg-ch.up { color: #9be08b; } .rg-ch.down { color: #ff9aa8; }
.rg-plot { position: relative; }
.rg-svg { display: block; max-width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.rg-grid { stroke: rgba(255, 255, 255, .06); stroke-width: 1; }
.rg-ax { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.rg-line { fill: none; stroke: var(--pink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.rg-dot, .rg-hov { fill: var(--pink); stroke: var(--panel); stroke-width: 2; }
.rg-x { stroke: rgba(255, 255, 255, .28); stroke-width: 1; opacity: 0; } .rg-hov { opacity: 0; }
.rg-svg.on .rg-x, .rg-svg.on .rg-hov { opacity: 1; }
.rg-hit { fill: transparent; cursor: crosshair; }
.rg-tip { position: absolute; top: -6px; z-index: 2; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; max-width: 260px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 10px;
  background: rgba(21, 15, 19, .96); box-shadow: 0 8px 24px rgba(0, 0, 0, .45); font-size: 12.5px; font-variant-numeric: tabular-nums; pointer-events: none; transform: translateY(-100%); }
.rg-tip b { font-size: 14px; } .rg-tip span:not(.rg-ch) { color: var(--gold); font-weight: 700; } .rg-tip small { flex-basis: 100%; color: var(--muted); font-size: 11.5px; }
.rg-none { margin: 4px 0; color: var(--muted); font-size: 13px; }
@media (max-width: 520px) { .rg-seg { display: flex; width: 100%; flex-wrap: nowrap; } .rg-seg .seg-btn { flex: 1 1 0; min-width: 0; padding: 6px 4px; font-size: 13px; text-align: center; white-space: nowrap; } } /* (a phone: the periods in one row) */