/* Player history graphs, drawn by assets/history.js (viewer, server pages) and
   inc/history.php (server pages without JavaScript). Uses the site's tokens. */

.history-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 0 0 12px; background: var(--line); border: 1px solid var(--line); }
.history-tiles .tile { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 10px 12px 9px; background: var(--panel); }
.history-tiles .k, .history-tiles .d { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.history-tiles .k { color: var(--dim); }
.history-tiles .v { color: #fff; font: 400 21px/1.1 var(--head); white-space: nowrap; }
.history-tiles .v small { color: var(--faint); font: 400 12px "JetBrains Mono", ui-monospace, monospace; }
.history-tiles .d { min-height: 14px; color: var(--faint); }
.history-tiles .d.up { color: var(--ok, #7CE0A6); }
.history-tiles .d.down { color: var(--bad, #F0707A); }
.history-tiles .d.flat { color: var(--dim); }
.history-tiles .d span { color: var(--faint); }

.history-card { margin: 0 0 4px; padding: 10px 12px 8px; background: var(--panel); border: 1px solid var(--line); }
.history-legend { display: flex; align-items: center; gap: 16px; margin: 0 0 4px; color: var(--dim); font-size: 11px; }
.history-legend .zone { margin-left: auto; color: var(--faint); }
.history-legend .key, .history-tip .key { display: inline-block; flex: none; margin-right: 6px; vertical-align: middle; }
.key.line { width: 12px; height: 2px; background: var(--ice); }
.key.fill { width: 10px; height: 10px; background: rgba(168, 219, 255, .34); }

.history-plot { position: relative; }
.history-chart, .history-busy { display: block; width: 100%; height: auto; overflow: visible; }
.history-chart { cursor: crosshair; touch-action: pan-y; }
.history-chart:focus { outline: none; }
.history-chart:focus-visible { outline: 1px solid var(--ice); outline-offset: 3px; }
.history-chart .gl, .history-busy .gl { stroke: var(--line); stroke-width: 1; shape-rendering: crispEdges; }
.history-chart .gl.base, .history-busy .gl.base { stroke: var(--line-hi); }
.history-chart text, .history-busy text { font: 400 10px "JetBrains Mono", ui-monospace, monospace; }
.history-chart .yl, .history-chart .xl, .history-busy .xl { fill: var(--faint); }
.history-chart .cap { fill: var(--dim); }
.history-chart .area { fill: rgba(168, 219, 255, .09); }
.history-chart .avg { fill: rgba(168, 219, 255, .3); }
.history-chart .peak { fill: none; stroke: var(--ice); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.history-chart .dot, .history-chart .hover { fill: var(--ice); stroke: var(--panel); stroke-width: 2; }
.history-chart .hover { pointer-events: none; }
.history-chart .dl, .history-busy .dl { fill: #fff; font-weight: 500; }
.history-chart .cross { stroke: rgba(255, 255, 255, .35); stroke-width: 1; vector-effect: non-scaling-stroke; }

.history-tip { position: absolute; z-index: 2; display: grid; gap: 3px; min-width: 140px; padding: 7px 10px 8px; background: rgba(4, 5, 6, .96); border: 1px solid var(--line-hi);
  color: var(--dim); font-size: 11px; white-space: nowrap; pointer-events: none; }
.history-tip[hidden] { display: none; }
.history-tip .when { margin-bottom: 2px; }
.history-tip .tip-row { display: flex; align-items: center; }
.history-tip b { margin-right: 5px; color: #fff; font-weight: 500; }
.history-tip em { margin-left: 4px; color: var(--faint); font-style: normal; }
.history-tip .map { color: var(--text); }

.history-busy .col { fill: rgba(168, 219, 255, .24); }
.history-busy .col.busy { fill: var(--ice); }
.history-busy .hit { fill: transparent; }
.history-busy .hour:hover .col { fill: rgba(168, 219, 255, .42); }
.history-busy .hour:hover .col.busy { fill: #CDEAFF; }

@media (max-width: 560px) {
  .history-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}