/* The four daily charts on /analytics, and nothing else.
 *
 * Its own sheet for doc.css and rail.css's reason rather than a new idea:
 * pages.css sits close to the line ceiling in `docs/constants.toml`, so a rule
 * appended there breaks it. This carried two exact counts, was 151 lines stale
 * on the first of them, and the corrected pair went stale again inside a day -
 * so the counts are gone rather than corrected a third time. A stale one is
 * what files a SHARED rule in a page sheet, where nobody looks for it, and
 * `wc -l static/css/*.css` cannot rot. Loaded on every page like those two are,
 * which is 2 KB against never having to decide per page which sheets a template
 * gets.
 *
 * Every colour is a token from tokens.css. A hex typed in here would be a fifth
 * palette nobody could find when the theme moves. */

.spark-set {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--step-4);
}

.spark {
  margin: 0;
  padding: var(--step-4);
  background: var(--surface-glass);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-raised);
  /* The figure, then the chart, then the line under it. */
  display: grid;
  gap: var(--step-3);
}

/* The name sits above its own figure, small, because the figure is what the
 * card is for and a heading the same size as its number competes with it. */
.spark figcaption {
  display: grid;
  gap: var(--step-1);
}

.spark-name {
  font-family: var(--font-body);
  font-size: var(--step-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}

.spark-total {
  font-family: var(--font-display);
  font-size: var(--step-8);
  font-weight: 600;
  line-height: 1.05;
  color: var(--text-1);
  /* Tabular figures: four cards in a row whose numbers change width as the
   * period does, and proportional digits make the row jitter between loads. */
  font-variant-numeric: tabular-nums;
}

.spark-svg {
  display: block;
  width: 100%;
  height: 5rem;
  /* The baseline the bars stand on. Without it a card holding one quiet week
   * is an empty box, which reads as a chart that failed to draw. */
  border-bottom: 1px solid var(--border);
}

.spark-bars {
  fill: var(--accent);
  /* preserveAspectRatio is none on the svg, so the box stretches to the card
   * and the bars stretch with it. That is right for bars and wrong for a
   * stroke, which is why nothing here is stroked. */
}

/* ONE FILL FOR ALL FOUR, since 2026-08-27. These were `--ok`, `--data-blue` and
   `--idle` against the accent on the first card: a different hue per card, over
   four cards that are four separate charts on four separate axes. Colour was
   carrying nothing - there is no legend and each card is labelled - so all it
   did was make the row read as generated. The operator named the pattern
   himself: an accent hue per card is one of the three things that made this site
   look machine made. What differs between these cards is the number, and the
   number is already 44px.
   `.spark {tone}` is still rendered, because `analytics/chart.rs` is not this
   agent's to change and a class nothing styles costs nothing. */

.spark-peak {
  margin: 0;
  font-size: var(--step-3);
  line-height: 1.5;
  color: var(--text-3);
}

/* The per-game gifting shelf. The tiles themselves are the `.game` classes
 * `pages.css` already carries, because a game tile here is the same object the
 * gifting page draws; what is added is only the figure on it and the fact that
 * this one is a link. */

.gm-head {
  display: grid;
  gap: var(--step-1);
  margin: 0 0 var(--step-4);
}

.gm-rate {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-8);
  font-weight: 600;
  line-height: 1.05;
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
}

.gm-basis {
  margin: 0;
  font-size: var(--step-3);
  line-height: 1.5;
  color: var(--text-3);
}

/* Its own class beside `.game-grid` because this sheet is linked on every page:
 * the rent shelf draws the same tiles and keeps the 104px floor it was measured
 * at. These tiles carry three more lines than those do, and at 104px "of 17
 * settled customer orders" wraps to four of them. */
.gm-grid {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

/* The li is the grid item and stretches to its row; the anchor inside it does
 * not, so without this a row of tiles ends at five different heights and the
 * rate on each sits at a different one. Packing the contents to the top puts
 * every leftover pixel at the bottom instead of between the lines. */
.gm-grid > li {
  display: grid;
}

.gm-grid .game {
  align-content: start;
}

/* Two lines reserved, because a name that wraps pushes its own figure a line
 * below its neighbour's and the shelf is read across, not down. */
.gm-grid .game-name {
  min-height: 2.6em;
}

/* The tile IS the link, so the whole card is the target rather than the four
 * words in the middle of it. */
.gm-link {
  text-decoration: none;
  color: inherit;
  transition: border-color 120ms ease;
}

.gm-link:hover,
.gm-link:focus-visible,
.gm-on {
  border-color: var(--accent);
}

.gm-figure {
  font-family: var(--font-display);
  font-size: var(--step-5);
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
}

.gm-bar {
  display: block;
  width: 100%;
  height: 4px;
  /* The track, so a low rate still draws the width it is a share OF. Without
   * it a 4% bar is a dot with nothing to read it against. */
  background: var(--surface-2);
  border-radius: var(--r-sm);
}

.gm-bar rect {
  fill: var(--ok);
}

/* The opened game, above the shelf it was opened from. */
.gm-open {
  margin: 0 0 var(--step-5);
  padding: var(--step-4);
  background: var(--surface-glass);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}

.gm-open-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--step-3);
  margin: 0 0 var(--step-4);
}

.gm-open-head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-5);
  color: var(--text-1);
}

.gm-close {
  font-size: var(--step-3);
  color: var(--text-3);
}

/* One card per row on a phone. The grid above already does this at 15rem, and
 * this is the floor under it: a chart narrower than about 12rem draws bars
 * under a pixel wide on an all-time period. */
@media (max-width: 26rem) {
  .spark-set {
    grid-template-columns: 1fr;
  }
  /* The opened game stacks instead of squeezing. Three columns on a phone puts
   * a 72px icon and a Close link either side of a display-size heading, which
   * leaves the name about eight characters wide. */
  .gm-open-head {
    grid-template-columns: 1fr;
    justify-items: start;
  }
  /* 150px still fits twice on a 26rem phone, and two of these tiles side by
   * side is the four-line basis line this class was added to prevent. */
  .gm-grid {
    grid-template-columns: 1fr;
  }
}