/* Analytics page: scatter plot, heat map, ranking table. Plain, high-contrast, no decoration. Colours follow the site's theme variables. */
.xp { --xp-ink: var(--text-primary); --xp-dim: var(--text-muted); --xp-grid: var(--border); --xp-plot: var(--bg-primary); --xp-pt: #0072b2; margin: 0 0 28px; }
.xp h3 { margin: 22px 0 4px; font-size: 18px; }
.xp-about { margin: 0 0 10px; color: var(--text-secondary); max-width: 80ch; font-size: 16px; }
.xp-ctrl { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: flex-end; margin: 8px 0; }
.xp-grp { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: flex-end; }
.xp-ctrl label { display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--xp-dim); }
.xp-ctrl label.xp-chk { flex-direction: row; align-items: center; gap: 6px; color: var(--xp-ink); padding: 6px 0; }
.xp-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--xp-ink); }
.xp select, .xp .xp-num, .xp .xp-search { font: inherit; font-size: 14px; color: var(--xp-ink); background: var(--bg-primary); border: 1px solid var(--border-strong, var(--border)); border-radius: 0; padding: 5px 6px; max-width: 100%; min-height: 32px; }
.xp .xp-num { width: 4.2em; }
.xp .xp-search { width: min(100%, 360px); }
.xp-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0; }
.xp-btn { font: inherit; font-size: 14px; color: var(--xp-ink); background: var(--bg-secondary); border: 1px solid var(--border-strong, var(--border)); border-radius: 0; padding: 5px 11px; min-height: 32px; cursor: pointer; }
.xp-btn:hover { background: var(--bg-tertiary); }
.xp-btn[aria-pressed="true"] { background: var(--xp-ink); color: var(--bg-primary); }
.xp-hint { font-size: 12px; color: var(--xp-dim); margin-left: 6px; }
.xp-wrap { position: relative; border: 1px solid var(--border-strong, var(--border)); background: var(--xp-plot); }
.xp-svg { display: block; width: 100%; height: auto; max-width: 100%; touch-action: none; user-select: none; -webkit-user-select: none; font-family: inherit; }
.xp-bg { fill: var(--xp-plot); }
.xp-frame { fill: none; stroke: var(--xp-ink); stroke-width: 1; }
.xp-grid { stroke: var(--xp-grid); stroke-width: 1; opacity: .75; }
.xp-tick { stroke: var(--xp-ink); stroke-width: 1; }
.xp-tl { fill: var(--xp-ink); font-size: 12px; font-variant-numeric: tabular-nums; }
.xp-al { fill: var(--xp-ink); font-size: 12px; }
.xp-split { stroke: var(--xp-ink); stroke-width: 1; stroke-dasharray: 5 4; opacity: .65; }
.xp-ql { fill: var(--xp-dim); font-size: 12px; font-style: italic; }
.xp-pt { stroke: var(--xp-plot); stroke-width: .8; fill-opacity: .66; }
.xp-pt.is-sel { stroke: var(--xp-ink); stroke-width: 1.6; fill-opacity: 1; }
.xp-ring { fill: none; stroke: var(--xp-ink); stroke-width: 1.4; }
.xp-lin { stroke: var(--xp-ink); stroke-width: 1.6; fill: none; }
.xp-ma { stroke: #d55e00; stroke-width: 1.8; fill: none; stroke-linejoin: round; }
.xp-hit { fill: transparent; cursor: crosshair; }
.xp-box { fill: rgba(0, 114, 178, .14); stroke: #0072b2; stroke-width: 1; stroke-dasharray: 4 3; pointer-events: none; }
.xp-tip { position: absolute; z-index: 3; pointer-events: none; max-width: 220px; padding: 6px 8px; font-size: 12px; line-height: 1.35; background: var(--bg-primary); color: var(--xp-ink); border: 1px solid var(--xp-ink); }
.xp-tip[hidden] { display: none; }
.xp-legend { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 8px 0 4px; }
.xp-leg { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 14px; color: var(--xp-ink); background: none; border: 1px solid var(--border); border-radius: 0; padding: 3px 8px; min-height: 28px; cursor: pointer; }
.xp-leg.is-off { opacity: .4; text-decoration: line-through; }
.xp-sw { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.xp-stats { font-size: 14px; color: var(--xp-dim); font-variant-numeric: tabular-nums; margin: 4px 0; }
.xp-stats div { margin: 1px 0; }
.xp-info { margin: 8px 0 0; padding: 10px 12px; border: 1px solid var(--border); background: var(--bg-secondary); font-size: 14px; }
.xp-ititle { font-weight: 600; margin-bottom: 6px; }
.xp-none { color: var(--xp-dim); }
.xp-kv { display: grid; grid-template-columns: max-content 1fr; gap: 2px 14px; margin: 0; }
.xp-kv dt { color: var(--xp-dim); }
.xp-kv dd { margin: 0; overflow-wrap: anywhere; }
.xp-ul { margin: 0; padding-left: 18px; }
.xp-mut { color: var(--xp-dim); font-size: 14px; }
.xp-hscroll { overflow-x: auto; border: 1px solid var(--border); background: var(--xp-plot); -webkit-overflow-scrolling: touch; }
.xp-hscroll .xp-svg { width: auto; max-width: none; touch-action: auto; }
.xp-hc { fill: var(--accent); }
.xp-empty { fill: none; stroke: var(--xp-grid); stroke-width: 1; stroke-dasharray: 2 3; }
.xp-cell { cursor: pointer; outline: none; }
.xp-cell:hover rect.xp-hc, .xp-cell:focus rect.xp-hc { stroke: var(--xp-ink); stroke-width: 1.5; }
.xp-cell.is-sel rect { stroke: var(--xp-ink); stroke-width: 2; }
.xp-cv { fill: var(--xp-ink); font-size: 12px; font-variant-numeric: tabular-nums; pointer-events: none; }
.xp-cv.on-dark { fill: #fff; }
.xp-tot { fill: var(--xp-dim); font-size: 12px; }
.xp-table { border-collapse: collapse; width: 100%; font-size: 14px; font-variant-numeric: tabular-nums; }
.xp-table th, .xp-table td { padding: 5px 9px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.xp-table th { position: sticky; top: 0; background: var(--bg-secondary); border-bottom: 1px solid var(--border-strong, var(--border)); white-space: nowrap; }
.xp-table th button { font: inherit; font-weight: 600; background: none; border: 0; color: var(--xp-ink); cursor: pointer; padding: 0; }
.xp-table .num { text-align: right; white-space: nowrap; }
@media (max-width: 560px) {
  .xp-hint { display: block; margin: 2px 0 0; }
  .xp-ctrl { gap: 6px 12px; }
  .xp-ctrl label { flex: 1 1 140px; }
  .xp-ctrl select { width: 100%; }
  .xp-kv { grid-template-columns: 1fr; gap: 0; } .xp-kv dd { margin-bottom: 4px; }
}

.xp-fig { margin: 14px 0 22px; }
.xp-card .xp-ctrl:first-of-type { padding-right: 40px; }
.xp-card .card-expand { top: 8px; right: 8px; }
.xp-card.expanded { display: block; overflow: auto; }
.xp-card.expanded .xp-hscroll { max-width: 100%; }
.xp-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 2px; }
.xp-tools .share-menu { margin-left: 0; position: relative; }
.xp-tools .share-pop { white-space: nowrap; }
.xp-tools .share-pop button { width: 100%; }
.xp-key { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--xp-ink); padding: 3px 6px; min-height: 28px; }
.xp-key svg { flex: none; }
.xp-keyc { fill: none; stroke: var(--xp-ink); stroke-width: 1; }
@media (pointer: coarse), (max-width: 760px) {
  .xp .xp-btn, .xp .xp-leg, .xp .xp-key, .xp select, .xp .xp-num, .xp .xp-search, .xp-ctrl label.xp-chk, .xp-tools .share-menu > summary { min-height: 40px; }
}
.xp-embed-pop { min-width: min(420px, 78vw); right: auto; left: 0; white-space: normal; }
.xp-embed-note { margin: 2px 4px 6px; font-size: 12px; color: var(--xp-dim); }
.xp-embed-ta { width: 100%; box-sizing: border-box; font: 12px/1.35 ui-monospace, Consolas, monospace; color: var(--xp-ink); background: var(--bg-secondary); border: 1px solid var(--border); padding: 6px; resize: vertical; }
.xp-embed-pop button { width: auto; margin-top: 6px; align-self: flex-start; }