/*
 * ANALYTICS TAB (public/analytics.js).
 *
 * THE COLOURS ARE CHOSEN, NOT DEFAULTS, and they were measured rather than looked at: every pair that can touch in
 * a stack was checked for separation under normal vision and under simulated protanopia and deuteranopia, against
 * the dashboard's own two panels (#fffefa and #172237), in both themes.
 *
 *  - Eight hues in a FIXED ORDER (blue, orange, aqua, yellow, magenta, green, violet, red). The order is what keeps
 *    neighbours apart for a colour-blind reader, so it is never shuffled and a ninth hue is never generated: the
 *    tail is "other".
 *  - Two neutrals that separate from every hue by LIGHTNESS, because every hue sits in the same middle band:
 *    `quiet` (close to the panel: helpers, cancelled, "No level", "not set") and `ink` (far from it: "other", and
 *    the longest-wait line). A mid grey was tried first and failed against blue. `quietline` is `quiet` for a
 *    thin mark: a colour chosen to recede as a block cannot be seen as a 2px line.
 *  - Lite, Pro and Max are one hue stepped in lightness, so the order is visible in the colour itself and three
 *    purples can never be confused the way three unrelated hues can. In the dark theme the ramp runs the other
 *    way (Max is the brightest): on a dark panel more is lighter.
 *
 * The dark values are the same hues stepped for the dark panel, not an inversion. analytics.js reads these with
 * getComputedStyle and redraws when the theme changes; the HTML (legends, table dots) uses the variables directly.
 */
:root{
  --an-blue:#2a78d6;--an-orange:#eb6834;--an-aqua:#1baf7a;--an-yellow:#eda100;--an-magenta:#e87ba4;--an-green:#008300;--an-violet:#4a3aa7;--an-red:#e34948;
  --an-failed:#d03b3b;--an-quiet:#bcc3d1;--an-quietline:#8a93a6;--an-ink:#4b5263;
  --an-lite:#9d8fe8;--an-pro:#6a55cc;--an-max:#2f2278;
  --an-grid:#ebe8e1;--an-axis:#d6d2c8;--an-tip-bg:#172641;--an-tip-fg:#f7f5f0;--an-tip-muted:#b3bccd;--an-tip-line:#33425f;
}
:root[data-theme=dark]{
  --an-blue:#3987e5;--an-orange:#d95926;--an-aqua:#199e70;--an-yellow:#c98500;--an-magenta:#d55181;--an-green:#008300;--an-violet:#9085e9;--an-red:#e66767;
  --an-failed:#e66767;--an-quiet:#4a5470;--an-quietline:#7f8ca8;--an-ink:#c9cee0;
  --an-lite:#7b6be0;--an-pro:#a99ff0;--an-max:#ddd8fc;
  --an-grid:#243049;--an-axis:#34415b;--an-tip-bg:#0b1426;--an-tip-fg:#f2eee6;--an-tip-muted:#acb7ca;--an-tip-line:#2d3950;
}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){
  --an-blue:#3987e5;--an-orange:#d95926;--an-aqua:#199e70;--an-yellow:#c98500;--an-magenta:#d55181;--an-green:#008300;--an-violet:#9085e9;--an-red:#e66767;
  --an-failed:#e66767;--an-quiet:#4a5470;--an-quietline:#7f8ca8;--an-ink:#c9cee0;
  --an-lite:#7b6be0;--an-pro:#a99ff0;--an-max:#ddd8fc;
  --an-grid:#243049;--an-axis:#34415b;--an-tip-bg:#0b1426;--an-tip-fg:#f2eee6;--an-tip-muted:#acb7ca;--an-tip-line:#2d3950;
}}

/* ---- controls: one row above everything it scopes ---- */
.an-controls{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin:0 0 8px}
.an-seg{display:inline-flex;border:1px solid var(--border);border-radius:9px;background:var(--panel);overflow:hidden;max-width:100%}
.an-seg button{border:0;border-radius:0;background:transparent;color:var(--muted);min-height:34px;padding:6px 11px;font-size:12.5px;font-weight:550}
.an-seg button+button{border-left:1px solid var(--border)}
.an-seg button:hover{background:color-mix(in srgb,var(--accent) 6%,var(--panel));color:var(--text)}
.an-seg button[aria-pressed=true]{background:var(--text);color:var(--panel)}
.an-seg button[aria-disabled=true]{opacity:.45;cursor:not-allowed}
.an-seg button[aria-disabled=true]:hover{background:transparent;color:var(--muted)}
.an-seg.small button{min-height:28px;padding:3px 9px;font-size:12px}
.an-controls select{width:auto;max-width:100%;min-height:36px;font-size:12.5px}
.an-switch{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);cursor:pointer;min-height:36px}
.an-switch input{width:auto;min-height:0;margin:0;flex:none}
.an-controls .spacer{flex:1}
.an-updated{font-size:11.5px;color:var(--muted);margin:0 0 18px;font-variant-numeric:tabular-nums}
#an-error:empty{display:none}
#an-body{transition:opacity .15s}
.an-busy #an-body{opacity:.55}

/* ---- headline tiles ---- */
.an-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:12px;margin:0 0 6px}
.an-tile{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:14px 16px;box-shadow:var(--shadow);min-width:0}
.an-tile .k{font-size:12px;color:var(--muted);font-weight:550}
.an-tile .v{font-size:25px;font-weight:650;letter-spacing:-.6px;line-height:1.25;margin:5px 0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.an-tile .n{font-size:11.5px;color:var(--muted);line-height:1.4}
.an-tile .n b{color:var(--text);font-weight:600}

/* ---- sections and cards ---- */
.an-h{margin:30px 0 12px}
.an-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.an-grid.an-gap{margin-top:16px}
.an-col{display:flex;flex-direction:column;gap:16px;min-width:0}
.an-col>.an-card+.an-card{margin-top:0}
.an-grid>.wide{grid-column:1/-1}
.an-card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:16px 18px 14px;box-shadow:var(--shadow);min-width:0}
.an-card+.an-card{margin-top:16px}
.an-grid>.an-card+.an-card{margin-top:0}
.an-card-head{display:flex;gap:10px 14px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;margin-bottom:10px}
.an-card-head>div:first-child{min-width:0;flex:1 1 260px}
.an-card h3{font-size:15px;margin:0 0 2px}
.an-sub{margin:0;font-size:12.5px;color:var(--muted);line-height:1.45;max-width:86ch}
.an-note{margin:4px 0 0;font-size:12px;color:var(--muted)}
.an-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.an-tools>button{min-height:28px;padding:3px 9px;font-size:12px;color:var(--muted)}
.an-tools>button[aria-pressed=true]{color:var(--text);border-color:var(--text)}
.an-mini{font-size:12px;font-weight:600;color:var(--muted);margin:10px 0 4px;display:flex;gap:6px 12px;align-items:center;flex-wrap:wrap}
.an-mini:first-of-type{margin-top:0}
.an-mini>span:first-child{color:var(--text)}

/* ---- legend: buttons, so it is the toggle and it is reachable by keyboard ---- */
.an-legend{display:flex;flex-wrap:wrap;gap:4px 6px;margin:0 0 8px;min-height:0}
.an-legend:empty{display:none}
.an-key{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;min-height:26px;padding:2px 7px;border-radius:7px;font-size:12px;font-weight:500;color:var(--text);max-width:100%}
.an-key:hover{background:var(--track);color:var(--text)}
.an-key b{font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.an-key span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.an-key[aria-pressed=false]{color:var(--muted);text-decoration:line-through}
.an-key[aria-pressed=false] .an-sw{background:transparent;box-shadow:inset 0 0 0 1.5px var(--border)}
.an-sw{width:10px;height:10px;border-radius:2.5px;background:var(--c);flex:none}
.an-sw.line{height:3px;width:14px;border-radius:2px}
.an-sw.dash{height:0;width:14px;border-radius:0;background:transparent;border-top:2px dashed var(--c)}
.an-key[aria-pressed=false] .an-sw.dash{box-shadow:none;border-top-color:var(--border)}
.an-dot{display:inline-block;width:8px;height:8px;border-radius:2px;background:var(--c);margin-right:7px;vertical-align:baseline}

/* ---- plot ---- */
.an-plot{position:relative;height:260px;min-width:0}
.an-plot.tall{height:300px}
.an-plot.short{height:150px}
.an-plot.mid{height:220px}
.an-plot.is-empty,.an-plot.tall.is-empty,.an-plot.short.is-empty,.an-plot.mid.is-empty{height:96px}
.an-plot canvas{display:block;border-radius:4px}
.an-plot canvas:focus-visible{outline:2px solid color-mix(in srgb,var(--accent) 65%,transparent);outline-offset:2px}
.an-plot .an-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--muted);font-size:13px;padding:12px 18px;line-height:1.5}
.an-tip{position:absolute;top:0;left:0;z-index:5;pointer-events:none;opacity:0;transition:opacity .08s;background:var(--an-tip-bg);color:var(--an-tip-fg);border:1px solid var(--an-tip-line);border-radius:9px;padding:8px 10px;font-size:12px;line-height:1.45;box-shadow:0 8px 28px #0000002e;max-width:min(300px,92%);font-variant-numeric:tabular-nums}
.an-tip-t{font-weight:600;margin-bottom:4px;white-space:nowrap}
.an-tip-r{display:flex;align-items:baseline;gap:7px;white-space:nowrap}
.an-tip-r b{font-weight:650;min-width:2.2em}
.an-tip-r span{color:var(--an-tip-muted);overflow:hidden;text-overflow:ellipsis}
.an-tip-r i{width:9px;height:9px;border-radius:2px;background:var(--c);flex:none;align-self:center}
.an-tip-r i.line{height:3px;width:11px}
.an-tip-r i.none{background:transparent}
.an-tip-sep{border-top:1px solid var(--an-tip-line);margin:5px 0 4px}
.an-tip-n{color:var(--an-tip-muted)}

/* ---- tables ---- */
.an-tblwrap{overflow-x:auto;border:1px solid var(--border);border-radius:10px;-webkit-overflow-scrolling:touch;max-width:100%}
.an-tblwrap.scroll{max-height:340px;overflow-y:auto}
.an-tblwrap table{font-size:12.5px;min-width:max-content}
.an-tblwrap th{padding:9px 12px;position:sticky;top:0;z-index:1}
.an-tblwrap td{padding:8px 12px;font-variant-numeric:tabular-nums}
.an-tblwrap th.num,.an-tblwrap td.num{text-align:right}
/* The first column stays put while a wide table scrolls sideways: on a phone a row of numbers is otherwise nameless. */
.an-tblwrap th:first-child,.an-tblwrap td:first-child{position:sticky;left:0}
.an-tblwrap td:first-child{background:var(--panel);z-index:1}
.an-tblwrap th:first-child{z-index:2}
.an-tblwrap td.name{font-weight:550;max-width:260px;overflow:hidden;text-overflow:ellipsis}
.an-tblwrap td.mono{font-family:var(--mono);font-size:11.5px;color:var(--text)}
.an-tblwrap td .muted{font-weight:400}
.an-tbl-foot{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:8px;font-size:12px;color:var(--muted)}
.an-tbl-foot button,.an-link{min-height:28px;padding:3px 9px;font-size:12px}
.an-link{border:0;background:transparent;color:var(--accent);padding:0;min-height:0;font:inherit;font-weight:550;text-align:left}
.an-link:hover{text-decoration:underline;background:transparent}
.an-sort{border:0;background:transparent;padding:0;min-height:0;font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;display:inline-flex;gap:4px;align-items:center}
.an-sort:hover{background:transparent;color:var(--text)}
.an-sort i{font-style:normal;opacity:.35}
th[aria-sort] .an-sort{color:var(--text)}
th[aria-sort] .an-sort i{opacity:1}
.an-tag{display:inline-block;font-size:10px;font-weight:650;letter-spacing:.04em;text-transform:uppercase;padding:1px 6px;border-radius:5px;background:color-mix(in srgb,var(--an-aqua) 16%,var(--panel));color:var(--text);margin-left:6px;vertical-align:1px}
.an-people-bar{display:flex;gap:10px 14px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.an-people-bar input{width:240px;max-width:100%;min-height:34px;font-size:12.5px}
.an-people-bar span{font-size:12px;color:var(--muted)}
.an-below{margin-top:12px}

/* ---- small HTML bars (errors, prompts per game): one series, one colour, the number beside the bar ---- */
.an-bars{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:7px 10px;align-items:center;font-size:12.5px}
.an-bars .l{white-space:nowrap}
.an-bars .l.mono{font-family:var(--mono);font-size:11.5px}
.an-bars .t{height:10px;background:var(--track);border-radius:3px;overflow:hidden}
.an-bars .t i{display:block;height:100%;background:var(--an-blue);border-radius:0 3px 3px 0;min-width:2px}
.an-bars .t i.err{background:var(--an-failed)}
.an-bars .c{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.an-bars .c span{color:var(--muted);margin-left:6px}

@media(max-width:1180px){
  .an-grid{grid-template-columns:minmax(0,1fr)}
  /* Where a table can scroll sideways, the column that stays gets an edge (drawn inside the cell: a collapsed
     table's own border does not travel with a sticky cell). */
  .an-tblwrap th:first-child,.an-tblwrap td:first-child{box-shadow:inset -1px 0 0 var(--border)}
}
@media(max-width:760px){
  .an-controls{gap:8px}
  .an-controls .spacer{display:none}
  .an-seg button{padding:6px 9px}
  .an-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .an-tile{padding:12px 13px}
  .an-tile .v{font-size:21px}
  .an-card{padding:14px 13px 12px;border-radius:12px}
  .an-plot,.an-plot.tall{height:230px}
  .an-plot.short{height:140px}
  .an-plot.is-empty,.an-plot.tall.is-empty,.an-plot.short.is-empty,.an-plot.mid.is-empty{height:84px}
  .an-people-bar input{width:100%}
  .an-tblwrap td.name{max-width:150px}
}