/* «التكلفة والسجل» (DEMO.html insights_costs: .hubl .gblock .glist .meterx .logbar .srt .sub; M009's widgets). The shared looks are
   styles/settings.css (.gblock .glist .hubrow .field .unitwrap .err .oneline), styles/home.css (.meterx) and
   components/keyvalue.css (the table); this adds the page's spacing, the log's bar and the sort heads. Every value is a token. */
.costs {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-gap);
  padding-block: var(--spacing-gap);
}

.costs > .hubl {
  padding-inline: var(--spacing-window);
}

.costs .costsw {
  margin-top: 0;
  gap: var(--spacing-row);
}

.costs .costsw .oneline {
  margin: 0;
}

.costs .costsw .glist {
  margin-inline: calc(var(--spacing-window) * -1);
}

.costs .logbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-gap);
}

.costs .logbar .grow {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--font-size-sm);
}

.costs .logbar .mbtn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.costs .logbar .mbtn svg {
  width: var(--spacing-md);
  height: var(--spacing-md);
}

.costs .sortbtn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.costs .sortbtn .si {
  display: inline-block;
  min-width: 1ch;
  color: var(--app-muted);
  font-size: var(--font-size-meta);
}

.costs .sub {
  display: block;
  color: var(--app-muted);
  font-size: var(--font-size-meta);
}

.costs [data-part="table"] bdi {
  white-space: nowrap;
}