/* ─────────────────────────────────────────────────────────
   activity-grid — two periods over one clock, as texture.

   From a terminal readout: a deployed count in a box, then a
   band of cells per day under a shared hour axis. The
   reference is white and green on near-black. Inverted here,
   because every other diagram on this site is ink on white
   and a single dark figure in a case study reads as an
   embedded screenshot rather than as a drawing.

   Two decisions the inversion forced:

     The green had to move. #3ddc91 on black is a terminal
     green; on white it is 1.6:1 and effectively invisible.
     The active cells use the site's own --go, which is the
     one green already in public/style.css.

     The idle mark had to stay a mark. On black, an unlit
     cell can be a dim dot and still read; on white the same
     dot at the same contrast disappears, and an empty gap
     would say "no data" when what it means is "capacity
     sitting there unused". So the dots are darker than the
     reference's, proportionally.

   The monospace went too. This site has one typeface, and
   what the terminal face was actually doing here is holding
   the digits in a column — which tabular-nums does, in Inter.

   Paint only; geometry is the GEO block in activity-grid.js.
   Palette is public/style.css.
   ───────────────────────────────────────────────────────── */

/* ── The parts ─────────────────────────────────────────────
   Copied into public/style.css next to .d-*, .fn-*, .bp-*,
   .st-* and .bar-* when a case study takes one. Class names
   only, no style attributes — the site's CSP blocks those. */

/* The outer frame, and the headline box inside it. Hairlines: the frame is
   the readout's edge, not a container worth seeing. */
.ag-frame,
.ag-box {
  fill: none;
  stroke: var(--rule);
  stroke-width: 1;
}

/* An active slot. Square, flush to the grid pitch, no radius — the cell is a
   unit of a texture and a rounded one starts reading as a dot. */
.ag-live rect {
  fill: var(--ag-live);
}

/* An idle slot. Present, deliberately: the gap between the two bands is the
   whole diagram, and empty space would claim the axis simply stopped. */
.ag-idle rect {
  fill: var(--ink-25);
}

.ag-t {
  fill: currentColor;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.ag-t--dim {
  fill: var(--ink-50);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
/* The divider between a period's name and its counts. Lighter than --ink-50:
   it is punctuation, and at --ink-50 it competes with the name it separates. */
.ag-t--rule {
  fill: var(--ink-25);
  font-size: 13px;
}
.ag-t--num {
  fill: currentColor;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* The one coloured number. It is the figure the two bands differ on, and the
   bands themselves carry no numbers at all. */
.ag-t--live {
  fill: var(--ag-live);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ── The host ──────────────────────────────────────────────
   Workshop pages only. On the site .diagram provides the
   scroll, the min-width floor and the inherited currentColor. */

.ag {
  --ag-ink: #000;
  /* 0.55 not 0.5, matching public/style.css: #737373 on white at 4.74:1,
     which clears AA. 0.5 is 3.95:1 and fails. */
  --ink-50: rgba(0, 0, 0, 0.55);
  --ink-25: rgba(0, 0, 0, 0.25);
  --rule: rgba(0, 0, 0, 0.13);
  /* --go from public/style.css. 4.1:1 on white as text, which is why it is
     only ever used on a 600-weight number here and never on body copy. */
  --ag-live: #60a000;

  color: var(--ag-ink);
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    sans-serif;

  overflow-x: auto;
  overscroll-behavior-x: contain;
  min-width: 0;
}

.ag svg {
  display: block;
  width: 100%;
  height: auto;
  /* The cells are ~5 units wide. Under this floor they land on sub-pixel
     boundaries and the band turns to mush, which is worse than a scrollbar. */
  min-width: 36rem;
  overflow: visible;
}

.ag-figure {
  margin: 0;
  min-width: 0;
}
.ag-figure figcaption {
  margin-top: 16px;
  color: rgba(0, 0, 0, 0.55);
  max-width: 34rem;
}