/* Analytics-only additions. The shell, tables and tiles come from
 * ../shared/console-page.css. */

.source-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid #64ccff44;
  border-radius: 4px;
  color: var(--pf-muted);
  background: linear-gradient(145deg, #0a1d2a, #06101a);
  font: 600 0.72rem/1 var(--pf-ui-font);
  letter-spacing: 0.05em;
  cursor: pointer;
}

.source-toggle input { accent-color: var(--pf-blue); }
.source-toggle:has(input:checked) { border-color: var(--pf-amber); color: #f3d79a; }

.panel h3 {
  margin: 0 0 4px;
  font: 600 0.86rem/1.2 var(--pf-ui-font);
  letter-spacing: 0.05em;
  color: var(--pf-blue-bright);
}

.chart-block { margin-top: 20px; }

/* Charts scroll inside their own frame so a long game never makes the page
   scroll sideways. */
.chart-frame {
  overflow-x: auto;
  padding: 8px 0 4px;
}

.chart-frame svg {
  display: block;
  min-width: 480px;
  width: 100%;
  height: auto;
}

.chart-frame text {
  fill: var(--pf-muted);
  font: 400 11px/1 var(--pf-body-font);
}

.chart-frame .axis-line { stroke: #2b4453; stroke-width: 1; }
.chart-frame .grid-line { stroke: #1d2f3c; stroke-width: 1; stroke-dasharray: 3 4; }
.chart-frame .bar-label { fill: var(--pf-ink); font-variant-numeric: tabular-nums; }

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 10px;
  color: var(--pf-muted);
  font-size: 0.78rem;
}

.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend i { width: 12px; height: 12px; border-radius: 2px; display: inline-block; }

.split-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
}

.tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }

.tag-cloud .pill {
  padding: 5px 11px;
  border: 1px solid #2b4453;
  font-size: 0.8rem;
}

.tag-cloud:empty::after {
  content: "Every card in the market has been bought at least once.";
  color: var(--pf-green);
  font-size: 0.86rem;
}

.numeric.negative { color: #ff9c8f; }
.numeric.positive { color: #a9e8bd; }

@media (max-width: 640px) {
  .chart-frame svg { min-width: 380px; }
}