/* =====================================================================
   assets/ppgraph.css — the shared .ppgraph chart component.

   Single source of truth for the site's interactive charts. Lifted
   verbatim out of profile/index.php (which now links this file instead
   of carrying its own copy) so /profile, /activity and /ranked/analytics
   render pixel-identical graphs.

   Structure of a card:
     .ppgraph[data-default-stat][data-default-range][data-baseline]
       .ppgraph-stats  > .ppgraph-stat[data-stat][data-color]   (optional)
       .ppgraph-toolbar
         .ppgraph-meta   > [data-meta="start|now|delta|count|total|peak|avg"]
         .ppgraph-ranges > .ppgraph-range[data-range]           (optional)
       svg.ppgraph-svg[viewBox="0 0 W H"]
       script[type=application/json][data-ppgraph-data]

   The renderer lives in assets/ppgraph.js.
   ===================================================================== */

.ppgraph .ppgraph-svg {
  width: 100%; height: auto; display: block;
  background: rgba(14,20,36,.55);
  border: 1px solid rgba(35,48,82,.55);
  border-radius: 10px;
  margin-top: 8px;
}
.ppgraph-stats {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-bottom: 10px;
}
.ppgraph-stat {
  appearance: none; background: rgba(14,20,36,.55);
  border: 1px solid rgba(35,48,82,.55);
  color: var(--muted); cursor: pointer;
  padding: 5px 12px; border-radius: 999px;
  font: inherit;
  font-weight: 800; font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase;
  transition: background .15s, color .15s, border-color .15s;
}
.ppgraph-stat:hover { color: #cfe1ff; }
.ppgraph-stat.is-active {
  background: rgba(89,147,255,.22);
  color: #fff; border-color: rgba(89,147,255,.6);
}
/* Vertical divider between stat groups (e.g. skater vs goalie). */
.ppgraph-stat-divider {
  display: inline-block;
  width: 1px; height: 18px;
  background: rgba(255,255,255,.12);
  margin: 0 4px;
  align-self: center;
}
[data-theme="light"] .ppgraph-stat-divider { background: rgba(27,36,68,.18); }
@media (prefers-color-scheme: light) {
  [data-theme="default"] .ppgraph-stat-divider { background: rgba(27,36,68,.18); }
}
.ppgraph-toolbar {
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap; justify-content: space-between;
}
/* Mobile: shrink the tab pills + meta so a 14-stat tab row fits on
   fewer lines. */
@media (max-width: 560px) {
  .ppgraph-stats { gap: 3px; }
  .ppgraph-stat {
    padding: 4px 9px;
    font-size: 10px;
    letter-spacing: .06em;
  }
  .ppgraph-meta { gap: 8px; font-size: 11px; }
  .ppgraph-range {
    padding: 3px 8px;
    font-size: 10px;
    letter-spacing: .08em;
  }
}
.ppgraph-meta {
  display: flex; flex-wrap: wrap; gap: 14px;
  font-size: 12px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.ppgraph-meta strong {
  color: #fff; margin-left: 4px;
  font-weight: 800; font-variant-numeric: tabular-nums;
}
.ppgraph-ranges {
  display: inline-flex; gap: 2px; padding: 3px;
  border-radius: 999px;
  background: rgba(14,20,36,.55);
  border: 1px solid rgba(35,48,82,.55);
}
.ppgraph-range {
  appearance: none; background: transparent; border: 0;
  color: var(--muted); cursor: pointer;
  font: inherit;
  padding: 4px 10px; border-radius: 999px;
  font-weight: 800; font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase;
  transition: background .15s, color .15s;
}
.ppgraph-range:hover { color: #cfe1ff; }
.ppgraph-range.is-active {
  background: rgba(89,147,255,.28); color: #fff;
}
[data-theme="light"] .ppgraph .ppgraph-svg,
[data-theme="light"] .ppgraph-stat,
[data-theme="light"] .ppgraph-ranges {
  background: rgba(245,248,255,.6);
  border-color: rgba(27,36,68,.10);
}
[data-theme="light"] .ppgraph-meta strong { color: #0b1530; }
[data-theme="light"] .ppgraph-stat.is-active,
[data-theme="light"] .ppgraph-range.is-active {
  background: rgba(59,169,255,.18); color: #0b1530;
}
@media (prefers-color-scheme: light) {
  [data-theme="default"] .ppgraph .ppgraph-svg,
  [data-theme="default"] .ppgraph-stat,
  [data-theme="default"] .ppgraph-ranges {
    background: rgba(245,248,255,.6);
    border-color: rgba(27,36,68,.10);
  }
  [data-theme="default"] .ppgraph-meta strong { color: #0b1530; }
  [data-theme="default"] .ppgraph-stat.is-active,
  [data-theme="default"] .ppgraph-range.is-active {
    background: rgba(59,169,255,.18); color: #0b1530;
  }
}

/* The renderer inlines its axis colours as SVG presentation attributes
   (dark-theme rgba). A stylesheet rule beats a presentation attribute, so
   these re-theme the gridlines + axis labels for the near-white card in
   light mode. Series colours are <polyline stroke>/<rect fill> and are
   deliberately NOT matched here. */
[data-theme="light"] .ppgraph-svg line { stroke: var(--line); }
[data-theme="light"] .ppgraph-svg text { fill: var(--muted); }
@media (prefers-color-scheme: light) {
  [data-theme="default"] .ppgraph-svg line { stroke: var(--line); }
  [data-theme="default"] .ppgraph-svg text { fill: var(--muted); }
}

/* Hover overlay — crosshair + dot + tooltip on top of the SVG.
   The SVG is wrapped at runtime in .ppgraph-wrap; overlay nodes
   are pointer-events:none siblings so the wrap keeps receiving
   mousemove. */
.ppgraph-wrap { position: relative; }
.ppgraph-cross {
  position: absolute; width: 1px;
  background: rgba(137,208,255,.45);
  pointer-events: none; opacity: 0;
  transform: translateX(-0.5px);
  transition: opacity .1s;
}
.ppgraph-dot {
  position: absolute; width: 11px; height: 11px;
  border-radius: 50%; border: 2px solid #89d0ff;
  background: #0b1020; pointer-events: none; opacity: 0;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 3px rgba(137,208,255,.15);
  transition: opacity .1s;
}
.ppgraph-tip {
  position: absolute; pointer-events: none; opacity: 0; z-index: 6;
  background: rgba(9,13,26,.96);
  border: 1px solid rgba(137,208,255,.35);
  border-radius: 9px; padding: 7px 10px;
  white-space: nowrap; line-height: 1.35;
  box-shadow: 0 8px 22px rgba(0,0,0,.45);
  transition: opacity .1s;
}
.ppgraph-tip-v { display: block; font-weight: 800; font-size: 13px; font-variant-numeric: tabular-nums; }
.ppgraph-tip-w { display: block; font-size: 11px; color: var(--muted, #a6b3cf); margin-top: 1px; }

/* Share button + popover in the graph toolbar. */
.ppgraph-share-wrap { position: relative; margin-left: auto; }
.ppgraph-share {
  appearance: none; cursor: pointer;
  background: rgba(89,147,255,.16);
  border: 1px solid rgba(89,147,255,.5);
  color: #cfe1ff; border-radius: 999px;
  padding: 5px 13px; font-weight: 800; font-size: 11px;
  letter-spacing: .06em; text-transform: uppercase;
  transition: background .15s, color .15s, border-color .15s;
}
.ppgraph-share:hover { background: rgba(89,147,255,.3); color: #fff; }
.ppgraph-pop {
  position: absolute; right: 0; top: calc(100% + 6px);
  min-width: 230px; z-index: 30;
  display: flex; flex-direction: column;
  background: rgba(12,17,32,.98);
  border: 1px solid rgba(35,48,82,.9);
  border-radius: 11px; padding: 5px;
  box-shadow: 0 14px 34px rgba(0,0,0,.5);
}
/* display:flex above overrides the [hidden] attribute's display:none,
   so the closed state needs an explicit, more-specific rule. */
.ppgraph-pop[hidden] { display: none; }
.ppgraph-pop > * {
  display: block; text-align: left; text-decoration: none;
  appearance: none; background: transparent; border: 0;
  color: #eaf0ff; cursor: pointer;
  padding: 8px 10px; border-radius: 8px;
}
.ppgraph-pop > *:hover { background: rgba(89,147,255,.16); }
.ppgraph-pop b { display: block; font-size: 12.5px; font-weight: 800; }
.ppgraph-pop span { display: block; font-size: 11px; color: var(--muted, #a6b3cf); margin-top: 1px; }
[data-theme="light"] .ppgraph-dot { background: #f5f8ff; }
[data-theme="light"] .ppgraph-tip,
[data-theme="light"] .ppgraph-pop {
  background: #fff; border-color: rgba(27,36,68,.16);
}
[data-theme="light"] .ppgraph-pop > * { color: #0b1530; }
@media (prefers-color-scheme: light) {
  [data-theme="default"] .ppgraph-dot { background: #f5f8ff; }
  [data-theme="default"] .ppgraph-tip,
  [data-theme="default"] .ppgraph-pop {
    background: #fff; border-color: rgba(27,36,68,.16);
  }
  [data-theme="default"] .ppgraph-pop > * { color: #0b1530; }
}

/* ---- Heat map (7 × 24) --------------------------------------------
   Lifted from the profile ranked-Activity tab so any page can render the
   same day × hour grid. Cell background is inlined by the renderer (an
   alpha ramp over the series colour); everything else is here. */
.pphm {
  display: flex; flex-direction: column; gap: 3px;
  font-variant-numeric: tabular-nums;
}
.pphm[hidden] { display: none; }
.pphm-hours,
.pphm-row {
  display: grid;
  grid-template-columns: 36px repeat(24, 1fr);
  gap: 3px;
}
.pphm-hours { padding-bottom: 2px; }
.pphm-row { align-items: center; }
.pphm-hourlbl {
  font-size: 9.5px; color: var(--muted);
  text-align: center;
}
.pphm-daylbl {
  font-size: 11px; color: var(--muted);
  font-weight: 700; padding-right: 4px;
}
.pphm-cell {
  display: block;
  aspect-ratio: 1; min-height: 14px; min-width: 8px;
  border-radius: 3px;
  transition: transform .12s;
}
.pphm-cell[title]:hover {
  transform: scale(1.2);
  outline: 1px solid rgba(137,208,255,.6);
}
@media (max-width: 560px) {
  .pphm-hours,
  .pphm-row {
    grid-template-columns: 28px repeat(24, 1fr);
    gap: 2px;
  }
  .pphm-cell { min-height: 9px; border-radius: 2px; }
  .pphm-daylbl  { font-size: 10px; padding-right: 2px; }
  .pphm-hourlbl { font-size: 8.5px; }
}