/* Admin page: under the title, the three figures in a row (the words, the figure large, a line under it), then the
   chart of a running total under a rule, the table of jobs outside the team, and the footnote. Sections under rules, no boxes. Every rule is under the
   page, so nothing here reaches another page or a dialog. Tokens from styles.css only. */

.page[data-page="admin"] .admin-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-content: start; }
.page[data-page="admin"] .admin-figures {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 40px;
}
.page[data-page="admin"] .admin-figure { display: grid; gap: 2px; min-width: 0; align-content: start; }
.page[data-page="admin"] .admin-figure-label { color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.page[data-page="admin"] .admin-figure-value {
  font-size: 28px; font-weight: 600; line-height: 1.2; letter-spacing: -.012em; color: var(--ink); white-space: nowrap;
}
.page[data-page="admin"] .admin-figure-sub { color: var(--ink-3); font-size: 12.5px; line-height: 1.5; }
.page[data-page="admin"] .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px 20px; flex-wrap: wrap; }
.page[data-page="admin"] .admin-chart { padding: 12px 0 0; }
.page[data-page="admin"] .admin-chart .chart-head { margin-bottom: 6px; }
.page[data-page="admin"] .admin-jobs { margin-top: 12px; }
.page[data-page="admin"] .admin-deleted { color: var(--ink-3); font-size: 12.5px; }

/* the figures need about 200px each: side by side only where they have it */
@media (max-width: 699px) {
  .page[data-page="admin"] .admin-figures { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .page[data-page="admin"] .admin-body { gap: 28px; }
}