/* The statistics: series to choose on the left, diagrams and figures beside them. */
.stats {
  display: grid;
  grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

/* The series of a view, in the window that saves it. */
.stats-view-series {
  margin: 0 0 0.3rem;
  padding-left: 1.2rem;
}

/* On a dashboard: the views that were put there, without the series to choose from. */
.stats-embedded {
  grid-template-columns: minmax(0, 1fr);
}

.stats-picker .panel-head {
  flex-wrap: nowrap;
  align-items: center;
}

.stats-picker button {
  flex: none;
}

#series-list {
  max-height: calc(100vh - 12rem);
  overflow-y: auto;
}

.stats-group > summary {
  padding: 0.45rem 0.75rem;
  font-weight: 600;
  cursor: pointer;
  background: var(--table-head);
  border-bottom: 1px solid var(--border);
}

/* How many series of a kind are chosen, in its heading: seen while it is closed. */
.stats-chosen {
  float: right;
  font-weight: 400;
  font-size: 0.87rem;
  color: var(--accent);
}

.stats-entity {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.2rem 0.5rem;
  padding: 0.3rem 0.75rem;
  border-bottom: 1px solid var(--border);
}

.stats-entity-name {
  overflow-wrap: anywhere;
}

.stats-entity .choice button {
  min-height: 1.7rem;
  padding: 0 0.5rem;
  font-size: 0.87rem;
}

/* The bar above the diagrams: spans at a click, a span by hand, how often to read anew. */
.stats-bar {
  align-items: center;
}

.stats-fixed,
.stats-refresh,
.stats-view {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.stats-fixed label,
.stats-refresh,
.stats-view {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  font-weight: 400;
}

.stats-fixed input,
.stats-refresh select,
.stats-view select {
  width: auto;
}

/* The diagrams, and beside them what the mouse points at. */
.stats-body {
  display: grid;
  /* A width of its own for what the mouse points at: it must not grow and shrink with
     every value and push the diagrams about. */
  grid-template-columns: minmax(0, 1fr) 17rem;
  gap: 0.75rem;
  padding: 0.75rem;
}

.stats-body[hidden] {
  display: none;
}

.stats-chart {
  margin: 0 0 0.5rem;
}

.stats-chart figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.87rem;
}

/* The two buttons that move a diagram up or down among the others. */
.stats-move .icon-button {
  width: 1.5rem;
  min-height: 1.5rem;
  height: 1.5rem;
}

/* What somebody wrote about the moment the mouse points at: below the values, set apart
   from them. Without a note there is nothing to set apart. */
.stats-pointed-notes:has(.stats-note) {
  margin-top: 0.9rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--border);
}

.stats-note {
  padding-left: 0.5rem;
  border-left: 3px solid var(--lamp-warn);
  overflow-wrap: anywhere;
}

/* The notes of the span that is shown, below the figures. */
#notes .panel-head {
  font-weight: 600;
}

.stats-plot {
  min-width: 0;
}

.stats-pointed {
  align-self: start;
  position: sticky;
  top: 4rem;
  font-size: 0.87rem;
}

.stats-pointed p {
  margin: 0 0 0.3rem;
}

.stats-pointed-time {
  font-weight: 600;
}

/* The value has a place of fixed width, so that the name beside it never breaks anew. */
.stats-value {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 6.5rem;
  gap: 0.4rem;
  align-items: baseline;
}

/* The values of the diagram the mouse is over. The margin makes up for the padding, so
   that nothing moves when the mouse goes from one diagram to the next. */
.stats-value.is-here {
  margin-inline: -0.3rem;
  padding-inline: 0.3rem;
  border-radius: var(--radius);
  background: var(--table-head);
}

.stats-value-name {
  overflow-wrap: anywhere;
}

.stats-value strong {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}

.stats-mark {
  flex: none;
  width: 0.7rem;
  height: 0.7rem;
  margin-right: 0.35rem;
  vertical-align: -0.05rem;
}

/* The name of a series stays on one line with its colour, in the table of figures. */
#kpi tbody td:first-child {
  white-space: nowrap;
}

/* A canvas takes no tokens: these are asked for the colour a token has right now. */
.stats-ink {
  display: none;
}

.stats-ink.text {
  color: var(--text-muted);
}

.stats-ink.grid {
  color: var(--border);
}

/* What a diagram stands on, for the picture of it that is saved. */
.stats-ink.ground {
  color: var(--surface);
}

/* The band of a note in a diagram, and its words. */
.stats-ink.note {
  color: var(--lamp-warn);
}

/* The hatching where nothing was measured: grey, as nothing is said of the value there. */
.stats-ink.gap {
  color: var(--text-muted);
}

/* The span that is marked in a diagram. */
.stats-plot .u-select {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}

@media (max-width: 70rem) {
  .stats,
  .stats-body {
    grid-template-columns: minmax(0, 1fr);
  }

  #series-list {
    max-height: 18rem;
  }

  .stats-pointed {
    position: static;
  }
}