/* Usage page: under the title, the period's line of figures (what the machines cost, and the period's dates, with
   where a UTC day starts for a browser in another zone) and, at the right, the saving worked out for the runs created
   in the period, as the Runs page sets its own; then the provider lanes (spend per day, a lane per provider under the
   lane of their total, one scale for all), the projects, the providers with their share. 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="usage"] .usage-figures {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px 48px; flex-wrap: wrap; margin-top: -10px;
}
.page[data-page="usage"] .usage-figures > .usage-reckoning { margin-left: auto; }
.page[data-page="usage"] .usage-when { display: grid; gap: 4px; }
.page[data-page="usage"] .usage-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-content: start; }
.page[data-page="usage"] .usage-chart { padding: 12px 0 0; }
.page[data-page="usage"] .usage-chart .chart-head { margin-bottom: 6px; }
.page[data-page="usage"] .usage-tables {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 40px; align-items: start;
}
.page[data-page="usage"] .usage-provider { display: inline-flex; align-items: center; gap: 10px; }
.page[data-page="usage"] .usage-share { display: inline-flex; align-items: center; justify-content: flex-end; gap: 10px; }
.page[data-page="usage"] .usage-share .fig { min-width: 4ch; text-align: right; }
/* a sort button ends where its column does: its pad past the label would stick out of the last column shown and
   make the table scroll by those few pixels */
.page[data-page="usage"] .table .th-btn { margin-right: 0; padding-right: 0; }
/* a saving and its share: the share in a narrow column of its own after the dollars, as the Runs table has them; a
   phone reads it after the dollars instead, under them where it is too narrow for both on one line */
.page[data-page="usage"] .table :is(th, td).col-saved { padding-right: 0; }
.page[data-page="usage"] .table :is(th, td).col-share { padding-left: 6px; color: var(--ink-3); }
.page[data-page="usage"] .usage-phone-share { display: none; white-space: nowrap; }
/* the line under a project on a phone breaks between its facts (ui.js), never inside a figure */
.page[data-page="usage"] .cell-fold .fig { white-space: nowrap; }

/* the projects need about 520px: side by side only where they have it */
@media (max-width: 1199px) {
  .page[data-page="usage"] .usage-tables { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 599px) {
  .page[data-page="usage"] .table :is(th, td).col-share { display: none; }
  .page[data-page="usage"] .table :is(th, td).col-saved { padding-right: 0; }
  .page[data-page="usage"] .usage-phone-share { display: inline; }
  .page[data-page="usage"] .usage-figures { margin-top: -8px; }
  .page[data-page="usage"] .usage-figures > .usage-reckoning { margin-left: 0; }
  .page[data-page="usage"] .usage-body { gap: 32px; }
}
@media (max-width: 379px) {
  .page[data-page="usage"] .usage-saved { white-space: normal; }
}