.user-page .rank-history-chart { touch-action: pan-y; cursor: crosshair; }
.user-page .rank-history-chart > path { stroke: var(--theme-grass, #617c24); }
.user-page .rank-history-chart:focus-visible { outline: 2px solid var(--theme-water, #4c849b); outline-offset: 2px; }
.rank-history-cursor { pointer-events: none; }
.rank-history-cursor[hidden] { display: none; }
.rank-history-cursor line { stroke: #597c90; stroke-width: 1.5; stroke-dasharray: 4 3; }
.rank-history-cursor circle { fill: #fffaf0; stroke: #255b76; stroke-width: 3; }
.user-page .rank-history-endpoint { fill: #fffaf0; stroke: #255b76; stroke-width: 3; }
.user-page .rank-history-current b { color: var(--theme-water, #255b76); }
.user-page .rank-history-tooltip { transform: none; max-width: calc(100% - 8px); box-sizing: border-box; white-space: normal; text-align: center; }
.rank-history-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-top: 12px; font-size: 12px; }
.rank-history-controls label { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.rank-history-date { box-sizing: border-box; min-width: 0; max-width: 100%; padding: 6px 8px; border: 1px solid #c8b58d; border-radius: 4px; color: #34392d; background: #fffdf7; font: inherit; }
.rank-history-readout { color: #285b70; font-weight: 700; line-height: 1.6; overflow-wrap: anywhere; }
.user-page .rank-history-help { margin: 8px 0 0; color: #716d61; font-size: 11px; line-height: 1.6; }
@media (max-width: 559px) {
  .rank-history-controls { align-items: flex-start; flex-direction: column; }
  .rank-change-panel .rank-period-form { flex-wrap: wrap; }
}