/* Shared line/area chart (assets/chart.js). Colours come from the host page's
   own tokens, so it follows the dark/light toggle on every page. */
.mc { position: relative; width: 100%; --mc-line: var(--blurple, #5865F2); --mc-surface: var(--chart-surface, var(--bg2, #15171f)); }
.mc:focus-visible { outline: 2px solid var(--blurple, #5865F2); outline-offset: 4px; border-radius: 6px; }
.mc svg { display: block; width: 100%; overflow: visible; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.mc-grid { stroke: var(--chart-grid, rgba(128,134,160,.22)); stroke-width: 1; shape-rendering: crispEdges; }
.mc-base { stroke: var(--chart-axis, rgba(128,134,160,.45)); stroke-width: 1; shape-rendering: crispEdges; }
.mc-tick { font: 500 11px var(--font-sans, system-ui, sans-serif); fill: var(--muted, #8b8fa8); font-variant-numeric: tabular-nums; }
.mc-line { fill: none; stroke: var(--mc-line); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.mc-area { fill: var(--mc-line); opacity: .1; }
.mc-dot { fill: var(--mc-line); stroke: var(--mc-surface); stroke-width: 2; }
.mc-cross { stroke: var(--muted, #8b8fa8); stroke-width: 1; opacity: .55; shape-rendering: crispEdges; }
.mc-tip {
  position: absolute; top: 4px; left: 0; z-index: 3; pointer-events: none; white-space: nowrap;
  background: var(--chart-tip-bg, var(--bg3, #1d1f2b)); color: var(--text, #e3e5ec);
  border: 1px solid var(--chart-grid, rgba(128,134,160,.3)); border-radius: 8px;
  padding: 7px 10px; box-shadow: 0 8px 20px rgba(0,0,0,.28); font: 500 12px var(--font-sans, system-ui, sans-serif);
  opacity: 0; visibility: hidden; transition: opacity .1s ease;
}
.mc-tip.on { opacity: 1; visibility: visible; }
.mc-tip .v { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mc-tip .v span { font-size: 12px; font-weight: 500; color: var(--muted, #8b8fa8); }
.mc-tip .t { margin-top: 3px; color: var(--muted, #8b8fa8); font-size: 12px; }
.mc-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) { .mc-tip { transition: none; } }
/* Host pages style bare <span>/<b> (e.g. the shard detail labels); keep the tooltip immune. */
.mc .mc-tip .v span { display: inline; margin: 0; text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 500; color: var(--muted, #8b8fa8); }
.mc .mc-tip .v b { font-size: 14px; font-weight: 700; color: var(--text, #e3e5ec); }